SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: menu help

  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    menu help

    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?
    All those who wander aren't lost.

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i forgot js long time back, i have idea what i wanna use on it. its accordion type of js
    All those who wander aren't lost.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    none of the above are center align.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    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)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •