Shop Forum More Submit  Join Login

Journal CSS: Hover menus +

Journal Entry: Sat Feb 23, 2008, 4:27 AM
This tutorial is currently incomplete, and parts of it are not explained properly

Also, in the four years since I wrote this guide most of it has broken, so even what is here doesn't really work any more. Sorry. :heart:

First thing's first - hover menus wont work in IE, because IE has many gaps in it's support for CSS. It's possible, using the underscore hack to reformat your hover menu into, say, a sidebar, so that IE users can still see your links. I might write a tutorial on using the underscore hack at a later point, but I'm not going to go into any further detail here.

This technique should work in every other modern browser though, and when IE8 comes round, it'll work in that too.

Second, they're generally considered a 'bad thing' by intelligent web designers because the goal of a website is to communicate information in the most effective way possible - and hiding things behind other things is not communicating, it's keeping secrets. That said, our journals aren't websites, they're journals, so it's actually kinda beneficial to hide things out of the way so the main content is the focus. Still, keep in mind that any important links should probably be placed somewhere more obvious than hidden inside a hover menu.

Finally, the fancypants mini-thumbs only work in Firefox 3, and same goes for the centered horizontal menu, though I'll provide an alternative method of making horizontal menus too.




...tutorial start here!
Alright, time to break this down and walk through what's going on here; time for the tutorial.

Hopefully you've noticed the three example menus. They all use the same underlying base CSS, with additional instructions added via a second class name to make them act in the different ways you see. I've done things this way so that beginners don't have to fuss around too much in the CSS, but to do anything more advanced than colour changes etc will probably require you make bigger changes to the CSS itself.


The core: writing a list.
At the core of the hover menu is a HTML list, and without the fancy hover CSS applied to it the example menu looks like so:

The HTML would look something like the following (I've edited it down so it's easier to understand):

<ul>
| <li>Level 1 (Art)
| | <ul>
| | | <li>Level 2 (My Gallery)
| | | | <ul>
| | | | | <li>Level 3 (Photography)</li>
| | | | </ul>
| | | </li>
| | </ul>
| </li>
| <li>Level 1</li>
| <li>Level 1</li>
</ul>


Lists are written by putting list items (<li>...</li>) inside list tags (<ul>...</ul>) - and you can stick a new list inside a list item when you want to create a sub-menu - the code I will provide will allow up to three levels, with a fourth for thumbs which can also live on the second or third levels.

Now would be a good time to open a new tab to your journal edit page and create a list so you can play along. If you want to add thumbs to your list, don't worry about that just yet, there are several options I'll describe later... and anyhow - you're building a menu here, not a thumb featuring device, so thumbs shouldn't be your primary concern.

Once you've got your list structure all done, if you want to have a little icon to represent that a sub-menu exists (like the black/green bullets in my examples) place empty italic tags (<i></i>) at the end of each list item with a sub-list, ie:

<li>Level 1 <i></i>
| <ul>
| | <li>Level 2</li>
| </ul>
</li>


The last thing you have to do to your list is wrap it in a div tag with the class name 'menu_' (the underscore is there incase the class conflicts with an existing/future deviantart one.)

<div class="menu_">
...list goes here...
</div>


Now, as far as the HTML goes, you're done for now, and it's time to add the CSS.

bring on the fancytrousers! (the CSS)
You've got your own list written up in a new tab right? At this point it doesn't look anything like a hover menu, so lets get some fancypants on! To the left of the code block is a menu that is styled using the exact same CSS in the code block.

.menu_ br{display: none}
.menu_ ul{margin: 0; padding: 0; border: solid #ccc; border-width: 1px 1px 0 1px}

.menu_ li{
  margin: 0;
  padding: 2px 20px 2px 4px;
  position: relative;
  list-style: none;
  background: #eee;
  width: 80px;
  cursor: default;
  color: blue;
  border-bottom: 1px solid #ccc
}
.menu_ li:hover{background: #ffc; color: #f00!important}

.menu_ li ul{position: absolute; left: -999em}
.menu_ li li ul{position: absolute;left: -999em}

.menu_ li:hover ul{left: 104px; top: 0}
.menu_ li:hover li ul{left: -999em}
.menu_ li li:hover ul{left: 104px}

.menu_ li a{display: block; cursor: hand;color: blue;text-decoration: none!important}
.menu_ li a:hover{color: red}
.menu_ li:hover li a{color: blue}
.menu_ li:hover li li a{color: blue}
.menu_ li:hover a{color: red}
.menu_ li li li:hover a{color: red}

.menu_ li i{
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  display: block;
  background: url(bullet_black.png) center no-repeat
}
.menu_ li:hover li i{background-image: url(bullet_black.png)}
.menu_ li li:hover li i{background-image: url(bullet_black.png)}

.menu_ li:hover i{background-image:url(bullet_green.png)}
.menu_ li li:hover i{background-image:url(bullet_green.png)}
.menu_ li li li:hover i{background-image:url(bullet_green.png)}


To have border around the whole menu, and dividing each menu item, I had to be a bit smart. When there are multi-line menu items, it makes it easier to read if there is a separation between menu items - otherwise it's harder to tell if 'BING BING BING BING' is two menu items or one. So for that I applied border-bottom:1px solid #ccc to .menu_ li (could have used border-top instead, makes no difference.) Next, I wanted the border around the whole menu, so I applied border:1px solid #ccc to .menu_ ul - and what happened? The bottom border looked like it was 2px thick! That was because there was the bottom border from the last menu item, and also the border that I had applied to the whole menu. So I went back to .menu_ ul and changed the border property to: border:solid #ccc; border-width: 1px 1px 0 1px, so that it'd only apply to TOP, RIGHT and LEFT - with BOTTOM set to 0 (no border).

For vertical space between list items apply margin-bottom: 2px (or whatever value you like) to .menu_ li
For horizontal space between sub-lists however, apply padding-left: 2px (or whatever value you like) to .menu_ li ul

If you put space between the items, you'll also have to change the border properties - it'll look best if you take the border properties away from .menu_ ul and give .menu_ li a border right around (using the normal border property: border: 1px solid #ccc)

If you want to change the width of the menu items (.menu_ li) don't forget to change left: 104px in .menu_ li:hover ul and .menu_ li li:hover ul to match the change. The way we position the sub-menus is to move them # pixels away from the left edge of the list item that spawned it, so if you change the width of the list item, you also have to change the number of pixels to move the sub-menu. The value for left is the width + left/right padding of .menu_ li - kinda confusing, but its done that way so that the text never goes under the bullet image.

You might have noticed a lot of 'blue' and 'red' colour values. 'blue' are the not hovered colours, and 'red' is the colour things are when they are hovered. There's that one block there where there's a lot of 'red blue blue red red' - this is to ensure that as you hover across sub-menu to sub-menu the lists you 'came from' stay lit up in red (or whatever hover colour you pick.)

The final block of CSS are to set the little sub-menu indicator (the black/green bullet in my examples) - you can change this to any image you like, but if it's wider than 16 pixels you'll have to change the width in .menu_ li i.

positioning the menu (in sidebars, using horizontal method, absolutely positioning)
using the fancyass thumbs
...coming soon! I NEEDS TO EAT!

Add a Comment:
 
:iconghostkillar:
GhostKillar Featured By Owner Oct 1, 2012  Student General Artist
I don't understand this ;n; Can you make something with the code in it, plssss???
Reply
:iconthespook:
thespook Featured By Owner Oct 2, 2012
This is a really old tutorial (4 years!) that doesn't work properly anymore.

It's also been a long time since I did this sort of stuff, so I can't promise to update it, sorry.
Reply
:iconghostkillar:
GhostKillar Featured By Owner Oct 3, 2012  Student General Artist
oh, ok
Reply
:iconmotleydreams:
MotleyDreams Featured By Owner Jan 29, 2012  Hobbyist Writer
Thank you for this!

I'm fighting with the CSS to try and make a horizontal navigation menu that I know I've made on sites before, but I probably used Javascript. Did this ever get a sequel?
Reply
:iconphoenixleo:
phoenixleo Featured By Owner Apr 27, 2010
When will you do the positioning hover menus in sidebar? :paranoid: :giggle:
Reply
:iconthespook:
thespook Featured By Owner Apr 30, 2010
To put them in a sidebar you just put the list HTML in a sidebar :)

...but don't ask about the other stuff :lol:
Reply
:iconphoenixleo:
phoenixleo Featured By Owner May 1, 2010
oh thanks :salute:
Also, I used your tutorial on hover thumbs in here [link] :) And credited you :salute:

what other stuff? :paranoid:
Reply
:iconthespook:
thespook Featured By Owner May 10, 2010
I had planned to include a section for more advanced stuff that took it a little further, but I never got to it. And now it doesn't excite me like it used to, so :shrug:
Reply
:iconphoenixleo:
phoenixleo Featured By Owner May 10, 2010
:salute:
Reply
:iconchibi-jak:
chibi-jak Featured By Owner Jul 12, 2009
I has a quick question about using images for hover menus :ohnoes:
Like using the image as a tab. I dunno how to do it on deviantART ;m;
I've tried making one, but it turned out really... really.. horrible.
Reply
:iconthespook:
thespook Featured By Owner Jul 23, 2009
(sorry for late reply, my MC is always a mess)

I'm not sure if you mean little icons next to the menu items, or making the main menu items look like tabs. Probably tabs, right?

If you're using a fixed width for the menu items, you can just apply the tab image as a background. If they're variable width, you need two images: the length of the tab and one corner/end, and then another image for the opposite corner/end. You apply the first image as a background, and then the second would be applied as a background to an empty element.

If you need a bit of help with the actual HTML and CSS, let me know, and when I update the tutorial I'll give you a heads up :thumbsup:
Reply
:iconchibi-jak:
chibi-jak Featured By Owner Jul 23, 2009
(No no it's fine I don't mind :D)

Actually, I did mean the CSS... I'm horrible at explaining things...
I'm trying to make images tabs with CSS, so that when you hover over them, the image will change. It's simple image tabs {more or less fixed cus of a certain thing.} What I'm trying to do is a CSS layout for the =JakAndDaxterClub, and the tabs are seen in Precursor {in-game alphabet thing}. What I want is that when you hover over them, they translate into English. All in all, the CSS is frustrating. It barely shows up in Internet Explorer, it's horrible looking in Google Chrome, and only seems to look nice in Firefox. B| I want to make this thing work and be universal, but I am still learning CSS, and so I'm cutting corners. :depressed:
Reply
:iconpyritie:
Pyritie Featured By Owner May 3, 2009  Hobbyist Digital Artist
Your minigalleries on the popups look a bit messed up here :noes:
Reply
:iconthespook:
thespook Featured By Owner May 4, 2009
You mean that thumb that doesn't work, and is showing up as the thumb code? I guess they deleted/stored the deviation. I'll remove it.

:thumbsup:
Reply
:iconpyritie:
Pyritie Featured By Owner May 4, 2009  Hobbyist Digital Artist
Nah, they're all misaligned and stuff, and when I hover over them they fly all over the place. Want a screenshot?
Reply
:iconthespook:
thespook Featured By Owner May 4, 2009
What browser are you using?
Reply
:iconpyritie:
Pyritie Featured By Owner May 4, 2009  Hobbyist Digital Artist
Chrome.
Reply
:iconthespook:
thespook Featured By Owner May 4, 2009
Oh, that's right! How could I forget? :lol:

When I wrote the hover menus, FF3 wasn't out of alpha yet, and using inline-block in FF2 would make the thumbs flicker violently. Not wanting to give anyone a seizure, I switched it to use float instead. Then, when FF3 was released to the public, I wrote the minigal journal using inline-block.

I guess webkit is the opposite :shrug:

...though, I just installed Chrome beta to check it out, and I don't have any problems. :confused:
Reply
:iconpyritie:
Pyritie Featured By Owner May 4, 2009  Hobbyist Digital Artist
Reply
:iconthespook:
thespook Featured By Owner May 4, 2009
rofl, yeah - that's pretty much what'd happen in Firefox 2 with inline-block.

It's not happening in the latest beta of Chrome, and I don't use float in the 'real' minigal code, so it doesn't matter. I guess I'll update the code to use the newer version, thanks for letting me know about it :thumbsup:
Reply
(1 Reply)
:iconpyritie:
Pyritie Featured By Owner May 4, 2009  Hobbyist Digital Artist
Hold on lemme get you a video D:
Reply
:iconpyritie:
Pyritie Featured By Owner Apr 13, 2009  Hobbyist Digital Artist
Haha, just finished adding my menus. :#1:

Durr, dumb question time. How do I make them centered but make the spacing change depending on the width?

What I have: [link]
What I want it to look like: [link]
Reply
:iconthespook:
thespook Featured By Owner Apr 13, 2009
I can't believe it worked for you, I need to re-write and re-code this stuff! :lol:

To make the spacing change depending on the width of the journal you need to change all the width values to percentages. I tested the following on your journal, and it kinda worked, but you'll need to tweak the values further to iron out some of the bugs you'll find:

.menu_inline ul{width:97%}
.menu_inline ul li{width:20%}


:thumbsup:
Reply
:iconpyritie:
Pyritie Featured By Owner Apr 14, 2009  Hobbyist Digital Artist
:lol:

Tried that stuff but it has quite a lot of bugs :B I think I'll just stick to this one for now.

Oh, one last question if you don't mind. When the window is resized to be small (say if someone's on a small resolution), the "stamps" menu goes behind the sidebar. :confused:
Reply
:iconthespook:
thespook Featured By Owner Apr 14, 2009
Give the sidebar a z-index: of 10, and the menu popups 20 :)
Reply
:iconpyritie:
Pyritie Featured By Owner Apr 14, 2009  Hobbyist Digital Artist
AHHHH. Didn't know there was such a property. :D

Thanks for the help again! :salute:
Reply
:iconthespook:
thespook Featured By Owner Apr 14, 2009
It's useful for absolutely positioned elements - but it doesn't work on anything else :thumbsup:
Reply
:iconpyritie:
Pyritie Featured By Owner Apr 14, 2009  Hobbyist Digital Artist
Got it!
Reply
:iconbelceb:
Belceb Featured By Owner Sep 22, 2008
wow!! thank you very much
Reply
:iconisarl:
Isarl Featured By Owner Aug 20, 2008
It's nice to have a reference for this.
(You know, I didn't realize CSS had a cursor: attribute. Cool beans!)

I'm not completely through reading it yet, as I have to eat and run some errands, but for now:
I see you've hidden the non-hovered sub-menus by positioning them waaaay off to the side. (I sure hope nobody reading this journal has a screen >999em wide! :D)
Is there any particular reason not use a display:none; when they're not being hovered, and cascade over that with a display:block; or what-have-you when they are?
Reply
:iconboombox-creations:
BoomBox-Creations Featured By Owner Jul 27, 2008
teach us the rest of the code *bowing down*

and somehow, IE8 wont be compatible, microsoft has tonnes of problems, and so does windows. what makes you think IE8 would be any different? it may have a different layout. but same as IE7 which im planning 2 delete!!!
Reply
:iconthespook:
thespook Featured By Owner Jul 27, 2008
From what I've read so far IE8 will have proper support for CSS. Doesn't mean I'll be using it though, I'll stick with Firefox ;p - but it does mean we wont have to worry about idiots still using IE complaining that something doesn't work.
Reply
:iconboombox-creations:
BoomBox-Creations Featured By Owner Jul 27, 2008
thats a good thing, i might update to IE8, but im sticking with using firefox, unless microsogt can make a browser, with ALL the features of FF

and thats a good thing!! no more complaining about idiots!! lol
Reply
:iconboombox-creations:
BoomBox-Creations Featured By Owner Jul 27, 2008
thats a good thing, i might update to IE8, but im sticking with using firefox, unless microsogt can make a browser, with ALL the features of FF

and thats a good thing!! no more complaining about idiots!! lol
Reply
:iconpost-sanity:
post-sanity Featured By Owner Jul 7, 2008
Hey... all I want is a simple ? type of thing, so that when I put my CSS up for public, when people roll over the ? it has a little pop-up thing which shows the credit... you kinda have a similar thing on your Skins... I am rather confused?
Reply
:iconthespook:
thespook Featured By Owner Jul 7, 2008
How you code it depends on where in your journal you want to stick it, but the basic idea is that you have a div (or some other element) with two other elements inside it. In my info popups the structure was:

<div class="about">
About the Journal CSS
blah blah
</div>

Then, your CSS would hide the sup until .about was hovered over, and at the same time it would hide the bold tag. If you need help with the CSS, just check the source of one of my journals :thumbsup:
Reply
:iconpost-sanity:
post-sanity Featured By Owner Jul 7, 2008
Yet again, THANKS SO MUCH!
Reply
:iconphusion:
phusion Featured By Owner Mar 10, 2008  Hobbyist Digital Artist
awesome work, dude, i'm gonna definitely use this sometime in the future...

side note:
in firefox 2.0.0.12 the recent faves thumbs hover thumbnail is z'd behind the nonhover thumb... known issue?
Reply
:iconthespook:
thespook Featured By Owner Mar 10, 2008
yeah, I've tried to fix it, but I recon it's a bug in Firefox 2 - 'cause it doesn't happen in my beta of Firefox 3.

:thumbsup:
Reply
:iconphusion:
phusion Featured By Owner Mar 10, 2008  Hobbyist Digital Artist
ah... i haven't gone over to 3 yet, its kinda crashy on my system.

hrmm... peculiar the right and bottom borders are extending the width of .journalbox
Reply
:iconphusion:
phusion Featured By Owner Mar 10, 2008  Hobbyist Digital Artist
wait i'm mental ;) i've got it
Reply
:iconexchanged-stock:
exchanged-stock Featured By Owner Mar 2, 2008
:iconflowerdanceplz:
Reply
:iconexchanged-stock:
exchanged-stock Featured By Owner Feb 27, 2008
More notes for the notes :giggle:
Reply
:iconirenelangholm:
IreneLangholm Featured By Owner Feb 27, 2008  Professional Digital Artist
Oh, god. I'm watching this through IE now and it looks fucked up for lack of a better description. :rofl:
Reply
:iconthespook:
thespook Featured By Owner Feb 27, 2008
That's why people need to stop using IE :lol:
Reply
:iconirenelangholm:
IreneLangholm Featured By Owner Feb 28, 2008  Professional Digital Artist
Got that right. :nod:
Reply
:iconbleeding-dragon:
Bleeding-Dragon Featured By Owner Feb 26, 2008
I think I shall bookmark this page or something, I have a feeling this will be useful one (two... three...) day...
Reply
:iconblissart:
blissart Featured By Owner Feb 24, 2008
This will be really fun to explore!! :D
Reply
:iconthespook:
thespook Featured By Owner Feb 25, 2008
If I ever get the damned thing finished! :lol:
Reply
Add a Comment:
 
×

:iconthespook: More from thespook





Details

Submitted on
February 23, 2008
Link
Thumb

Stats

Views
2,189
Favourites
12 (who?)
Comments
102