menu help

**nofel** · Sep 22, 2010 12:20

hi folks,
i am creating this menu (for testing purpose) and i am facing two issue,
1.when i rollover the menu, the hover class is limited to the text only, i tried giving hover class display:block but it didn't work.
2. there is some leftover of the background on the li which has a active class. here is the code

Code CSS:

<html>
	<head>
		<title></title>
		<style type="text/css">
		#submenu ul{width:100px}
		#submenu li{list-style:none; margin-bottom:10px; background:#ffc666; padding:0 4px 0 4px;}
		#submenu a{color:white;}
		#submenu a:hover{background:#fcfb54;}
		#submenu a.current{background:#666; display:block;}
 
		</style>
	</head>
 
	<body>
	<div id="submenu">
		<ul>
			<li><a class="current" href="test.html">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">Link to Us</a></li>
		</ul>
	</div>
	</body>
</html>

moreover i need some more help, i wanna have sub menu under about, lets say "My Bio" and "what i do",but i want it hidden by default but when someone click on about the submenu open below about us, like a tree structure. how is that possible?

**donboe** · Sep 22, 2010 13:48

You should give the general a class the padding and display block:

Code CSS:

#submenu a {
    padding:0 4px 0 4px; display: block; color:white;
}
 
#submenu a:hover,
#submenu a:focus {
    background:#fcfb54;
}
 
#submenu a.current{
    background: #666;
}

**Paul O'B** · Sep 22, 2010 13:49

Hi,

The anchor needs to be display:block but if you want it full width then you need the padding on the anchor and not on the list because that will make the anchor narrower.

Code:

#submenu ul {
    width:100px
}
#submenu li {
    list-style:none;
    margin-bottom:10px;
    background:#ffc666;
}
#submenu a {
    color:white;
    padding:0 4px;
    display:block;
    width:92px;/* ie6 needs haslayout or won't hover over the whole block*/
}
#submenu a:hover {
    background:#fcfb54;
}
#submenu a.current {
    background:#666;
}

If you want subnavigation then you would nest another ul and then use some javascript to hide and show it when clicked.

Code:

    <ul>
        <li><a class="current" href="test.html">Home</a></li>
        <li><a href="">About</a>
            <ul>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
            </ul>
        </li>
        <li><a href="">Contact</a></li>
        <li><a href="">Link to Us</a></li>
    </ul>

Here's a very basic example but there are some much better ones around. If you can't manage it yourself then there are plenty of jquery menus around that will do the same.

**nofel** · Sep 23, 2010 08:20

i forgot js long time back, i have idea what i wanna use on it. its accordion type of js

**nofel** · Sep 28, 2010 23:31

Hi again, i have a problem relating to menu alignment. so i thought i should post here as we are talking about menu. i have this image file which served as a navigation but i wanna make it more generic, giving user a clean UI, if you see this it worked perfectly fine. while when i comment one li it become this where as i want it to be centered aligning each other parallel

**noonnope** · Sep 28, 2010 23:39

none of the above are center align.

**nofel** · Sep 28, 2010 23:49

Ah! i was able to fix it. i was using positioning. which makes the images stay there even if they are not there. so i removed the positioning and used margin-top:-80px to make the icons comes up and sit on the background bar. so this got me thinking, whereas positioning is somewhat cumbersome. is margin in negative value ok? without using positioning

**RyanReese** · Sep 29, 2010 05:48

Originally Posted by emaarkhan

Ah! i was able to fix it. i was using positioning. which makes the images stay there even if they are not there. so i removed the positioning and used margin-top:-80px to make the icons comes up and sit on the background bar. so this got me thinking, whereas positioning is somewhat cumbersome. is margin in negative value ok? without using positioning

Negative margins are fine, though generally for design aspecs you shouldn't need it (though I admit some cases you do need it)

**Rayzur** · Sep 29, 2010 11:08

Originally Posted by emaarkhan

Hi again, i have a problem relating to menu alignment. so i thought i should post here as we are talking about menu. i have this image file which served as a navigation but i wanna make it more generic, giving user a clean UI, if you see this it worked perfectly fine. while when i comment one li it become this where as i want it to be centered aligning each other parallel

Hello emaar,
If you remember I had coded that page for you once before. You got rather upset because some of your client info was left in the code I posted which resulted in the entire thread being deleted.

I did track it down in a google screenshot and I was able to recover the code. I am going to try this once again with you, I have removed all incriminating code from the page and used sample images and text in place of yours.

Here is a link to the original code with google friendly adjustments to it.

Hope that helps

User Tag List

Thread: menu help

Thread Tools

Display

menu help

Bookmarks

Bookmarks

Posting Permissions