|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
CSS Popout Menu - 11/28/2004 23:42:43
The Mother of all Menus
Good day to everyone! Recently I had a request from a client to produce a CSS Popout Menu. The client had an example of one that they liked. When I viewed the code required to control the one he liked, I was somewhat astonished. The code was laden with scripting and other elements that I felt were not required.
So, I set out on a mission to see what was available from the CSS Gurus out there. I found a few that had the functionality I liked but still were laden with code. Then I found the Whatever:hover solution. After consulting with a CSS Guru that I know, we were able to develop this semantically correct nested <ul> style CSS Popout Menu.
At first, the nesting of the <ul>s was driving me up the wall. I was trying to do it via Notepad as I didn't think FP would be able to handle it. Boy was I wrong! Because of how I have my html coding preferences configured, FP did an excellent job of allowing me a WYSIWYG environment to properly nest the elements in the menu. It took about 12 hours of development and testing but I think we are real close to a killer CSS Popout Menu. What say ye? Feedback greatly appreciated. :)
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
|
|
|
d a v e
Posts: 4009
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
RE: CSS Popout Menu - 11/29/2004 0:13:09
works -and looks - very nicely in opera 7.54 win
_____________________________
David Prescott
Gekko web design
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 11/29/2004 0:50:16
Thanks d a v e! I should point out that we've tested in IE5+, IE6+, Opera 7+, FireFox and Mozilla. The appearance and functionality of the menu is 99.5% identical across those browsers. It amazes me how accurate you can be when following the published rules and guidelines for design. It makes designing like this so much easier.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 11/29/2004 23:05:09
Thanks for the kudos everyone. There are some flaws with the menu but they are minor. I am addressing one major one right now and it has to do with IE and Firefoxs' way of enlarging text. If only they would follow Opera's lead and use a true Zoom feature, this would be a breeze. But, that is not the case and the menu breaks if the user decides to tweak their viewing settings. Do a Ctrl ++ in Firefox to see what I mean.
So, to address that issue, I've had to rethink the strategy for a fluid environment which is very difficult for me as I work in a pixel perfect world. Everything I do is calculated in pixels from top, right, bottom and left. One of these days I'll go fluid. But, not until the browser manufacturers decide to follow one set of standards! ;)
Here is the working version of the accessible menu. Don't look at this in IE just yet, it is not behaving as it does in Firefox.
CSS Popout Menu - Fluid Accessible Version
< Message edited by pageoneresults -- 12/4/2004 10:59:16 >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 8:11:58
POR:
Would it be tooo much to ask you to write a sort of tutorial on how you are doing this and place it in the CSS links section? I think that this woudl be an ideal additon to this section if you could accomplish it. I know how busy you are right now, so if you could not accomplish it I would understand.
btw, thanks again for doing that little thing that I asked of you not long ago. I do appreciate you taking some time out of your very busy schedule to do this for me. I just wish I knew enough to just take that site and do a total redo for that person. Thank you again.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
fredecd
Posts: 312
Joined: 12/3/2003
From: Louisiana, USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 15:35:23
Looks great. Thanks.
One question:
This is available only in vertical layout? I assume that there is no way to make it lay horizontal?
_____________________________
Chris
http://www.sightbysite.net
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 15:58:50
I haven't really had time to totally go over it, but I would imagine that to get it to go horizontal you would use display inline. Same as you would for any horizontal menu.?
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
bwallacejr
Posts: 1
Joined: 12/1/2004
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 17:02:54
What a great looking menu. Do you think Search Engines would have any problems following the links?
B Wallace
| |
|
|
|
alan53
Posts: 2
Joined: 10/16/2004
From: Calgary, Alberta
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 17:59:48
Your menu is a thing of beauty. I MUST have one. It'll have to wait until I further my grasp of CSS, but I know enough now to understand what a breakthrough you've made.
Congratulations.
Alan
www.binaryarts.ca
| |
|
|
|
skip
Posts: 171
Joined: 12/9/2001
From: Missouri USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 20:53:27
looks great, i have been trying this myself with no luck,
it works good in ie. how can i get it to work in opera?
_____________________________
skip
www.mathewsremodeling.com
| |
|
|
|
JacieClaeys
Posts: 148
Joined: 7/13/2004
From: Henderson,TX
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 21:37:31
What a thing of beauty. I would have killed for this code 2 months ago when I hunted and hunted for something to replace my JS menu for a SE friendly menu. WOW
Jacie
_____________________________
Jacie
---------------------------------
"It's never the tigers that get you...it's always the gnats"
| |
|
|
|
dadsnook2000
Posts: 5
Joined: 9/20/2004
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:17:41
That is quite a menu structure. I'm sure many would like to have one of those == both for the impressive visual presentation and for the easy pathway selections. Unfortunately, my in-the-works website is highly graphical in its nature. But, your menu looks great. Dave.
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:30:35
I'm going to try and answer everyone's questions in individual replies to keep them separate. I'll take them from the last one that I've not answered which is from c1sissy...
quote:
ORIGINAL: c1sissy
POR:
Would it be tooo much to ask you to write a sort of tutorial on how you are doing this and place it in the CSS links section? I think that this woudl be an ideal additon to this section if you could accomplish it. I know how busy you are right now, so if you could not accomplish it I would understand.
The tutorial might be a little tough for me at the moment as my schedule has just become slightly overbooked! I will do my best to put something together over the next couple of weeks and post a link here when finished.
The thing is, there are certain parts of this menu that I don't fully understand yet, like the csshover.htc file which is the key that makes it all work. The CSS and Menu layout are a breeze once you get the concept of nesting the <ul>s. If you were to look at that menu in Opera with styles turned off, you'll see what I mean about the nesting. It is quite a sight.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:33:15
quote:
ORIGINAL: fredecd
This is available only in vertical layout? I assume that there is no way to make it lay horizontal?
I'm working on the horizontal version as I need one too. As soon as my schedule permits, I will hunker down and see what we can come up with. I say we because I do have a very talented CSS Guru working with me to fine tune anything that I may overlook or don't understand.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:36:59
quote:
ORIGINAL: bwallacejr
What a great looking menu. Do you think Search Engines would have any problems following the links?
Ah-ha, my favorite question of all. Absolutely, positively, YES! In fact, due to the semantic structure of this menu, it is more search engine friendly than if it were just links stacked vertically using <br>s.
You'll also notice that the menu makes use of <h> tags where appropriate. They are <h2>s in the current menu. Once included into their parent pages, they join seamlessly with the rest of the semantic structure to make it whole. This is probably "the most search engine friendly menu" available. ;)
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:38:22
quote:
ORIGINAL: skip
looks great, i have been trying this myself with no luck,
it works good in ie. how can i get it to work in opera?
Oh, the pain! Which version of Opera are you using? I've tested it in 3 versions of 7.x and all seems fine. What type of problems are you having? Please, do tell!
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:40:15
quote:
ORIGINAL: dadsnook2000
Unfortunately, my in-the-works website is highly graphical in its nature. But, your menu looks great.
Don't let that deter you. You could easily replace the text links with graphic links, it doesn't matter. Although the pure text links are going to carry more value than a graphic link.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/1/2004 22:42:11
And last but not least, a big thank you to everyone for your feedback and kudos, we greatly appreciate it. And thanks to Thomas for mentioning this topic in the Newsletter. I see we have a few new members in this topic and that is always something I always like to see. Community building at its best. ;)
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: CSS Popout Menu - 12/2/2004 0:17:31
quote:
The tutorial might be a little tough for me at the moment as my schedule has just become slightly overbooked! I will do my best to put something together over the next couple of weeks and post a link here when finished.
Any time that you would get something like this up, would be fabulous. And I know from previous pm's that you are extremly busy right now, and appreciate your posting this in here even more due to your schedule at this point in time. And I know that others are just as happy as I am with it.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
Horizontal CSS Popout Menu - 12/4/2004 10:32:14
Okay, we are listening to the community and taking all of the feedback to heart. Claire from Tanfa and I have come up with a horizontal version of the CSS Popout Menu which can be found here...
Horizontal CSS Popout Menu
It is still a work in process. We are going to do a much simpler version so that those of us who really don't understand this yet have a better picture of how to develop and implement a Horizontal CSS Popout Menu like this within your FrontPage Webs. That is my ultimate goal, I want this to be 100% user friendly for those of us working in a FrontPage WYSIWYG view, that would really be the icing on the cake!
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Horizontal CSS Popout Menu - 12/4/2004 10:39:33
POR,
HEH, I knew it was her! please tell her I'm working hard and will be sending her a ton of templates soon for her reveiw when she has time! You have One of the best working with you!
I think its great that you two are doing this. It looks great. And thank you so much for sharing this great work.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
skip
Posts: 171
Joined: 12/9/2001
From: Missouri USA
Status: offline
|
RE: CSS Popout Menu - 12/5/2004 1:06:54
Version 7.23
Build 3227
Platform Win32
System Windows XP
i tried it again
it doesn't pop in opera 7.23
in ie it looks just the same only the nested lists pop
i will get a new version of oper, i like opera, it a fast browser
do you think there is a setting that could cause this problem?
_____________________________
skip
www.mathewsremodeling.com
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Popout Menu - 12/23/2004 10:24:42
2004-12-23 - Updates
Claire from Tanfa and I have been working the few bugs out of the menu. Final versions are now available here...
CSS Horizontal Dropdown and Popout Menu
CSS Vertical Popout Menu
We will be writing a tutorial over the next few weeks. I expect to have that in place prior to the close of 2005 January. For those of you who wish to dive in without the tutorial, everything you'll need is in the source of the above pages. You will need to grab the whatever:hover htc file which you can download from Peterned's site. You can also grab it from ours by following the path shown in the source. I'd suggest downloading from Peterned's site as it will always contain the latest version.
Happy Holidays to all and to all a good night!
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
