#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31

    Lightbulb Css3 horizontal navigation menu


    I am having some troubles and can't figure out what it is. I have devloped a horizontal navigation menu utilizing lists and nest lists. I am using jquery to slide the root lists off to the left when one of the root li's are clicked and then to slide the subroot (nested ul) into display. The all works fine, when I click to show one of the nested ul's that contains only two list items, but when i try to display one of the ul's that has 3 list items it drops the nested ul onto the next line.

    Work in progress: http://www.option9.com/home.php

    Code:
    header nav {display: block; font-family: "Arial"; overflow: hidden}
    header nav ul {display: inline-block; list-style: none}
    header nav ul li {display: inline; position: relative}
    header nav ul li a {color: #ffffff}
    header nav ul li ul {display: inline-block}
    header nav ul li ul li {display: none; position: relative}
    nav#services ul.navMenu {
    	background: #2d343b; /* Old browsers */
    	background: -moz-linear-gradient(top,  #2d343b 0%, #1e5d99 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d343b), color-stop(100%,#1e5d99)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #2d343b 0%,#1e5d99 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #2d343b 0%,#1e5d99 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #2d343b 0%,#1e5d99 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  #2d343b 0%,#1e5d99 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d343b', endColorstr='#1e5d99',GradientType=0); /* IE6-9 */
    	border-radius: 5px;	font-size: 12px; padding: 0px 25px; text-align: right; width: 868px
    }
    nav#services ul.navMenu li a {
    	background: #7abcff; /* Old browsers */
    	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0); /* IE6-9 */
    	border-radius: 3px; border: 2px solid #2685f1; height: 50px; line-height: 50px; padding: 7px 10px
    }
    nav#services ul.navMenu li a:hover {color: #ffffff; background: #4096ee}
    nav#services ul li ul {float: right}
    #subLink {float: left !important}
    
    function activateLinks(service) {
    	jQuery("#services ul li").not("#subMenu").animate({left: '-150%'}, 1000, function() {
    		jQuery("#subLink li").first().css('display','inline').animate({left: '0%'}, 1000);
    		jQuery("#subLink li[name='"+service+"']").css('display','inline').animate({left: '0%'}, 1000);
    		jQuery("#"+service+" li").css('display','inline').animate({left: '0%'}, 1000);
    	});
    }
    
    	<header>
    		<ul class="navMenu">
    			<li><a /></li>
    			<li><a onclick="activateLinks('domainLinks')" /></li>
    			<li><a onclick="activateLinks('sharedLinks')" /></li>
    			<li><a onclick="activateLinks('serverLinks')" /></li>
    			<li id="subMenu">
    				<ul id="subLink">
    					<li><a onclick="deactivateLinks()" /></li>
    					<li name="domainLinks"><a /></li>
    					<li name="sharedLinks"><a /></li>
    					<li name="serverLinks"><a /></li>
    				</ul>
    				<ul id="domainLinks">
    					<li><a /></li>
    					<li><a /></li>
    					<li><a /></li>
    				</ul>
    				<ul id="sharedLinks">
    					<li><a /></li>
    					<li><a /></li>
    					<li><a /></li>
    				</ul>
    				<ul id="serverLinks">
    					<li><a/></li>
    					<li><a /></li>
    				</ul>
    			</li>
    		</ul>
    		</nav>
    	</header>
    Last edited by Nullified; September 23rd, 2012 at 10:29 PM.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31
    I have tried floating the list items, but when I do that the spacing goes away and I am unable to apply a margin to separate the links without breaking into a knew line again.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    what browser are you using?

    in google chrome its fine
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    give the <li>'s a display:inline-block; float:left; (you need to adjust your javascript also or nothing will show up) Ones you did this you can simply add some margins and paddiing as you like without ending up on a new line.

    As for the sliding stuff. Don't! Its very user unfriendly. The bounce rate on those pages is going to be huge. Make it easy to navigate, not a quest. customers are not patient they want it directly
    Last edited by aeternus; September 24th, 2012 at 09:47 AM.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31
    I have adjusted my code so I am now longer using sliding jquery animations, however I am having some trouble with my nav menu. The problem is with the vertical alignment of my links. They will not vertically align to the middle unless I set the li's line-height to match the height of the ul they are contained in. However, when doing so the div that contains my link items has extra spacing at the top and bottom. See it at www.option9.com/home.php

    I want to avoid using float. Please help me find an alternate way to vertically align my list items to the middle so my div.box does not have extra spacing.
    Last edited by Nullified; September 26th, 2012 at 03:12 PM.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31
    Originally Posted by Nullified
    I have adjusted my code so I am now longer using sliding jquery animations, however I am having some trouble with my nav menu. The problem is with the vertical alignment of my links. They will not vertically align to the middle unless I set the li's line-height to match the height of the ul they are contained in. However, when doing so the div that contains my link items has extra spacing at the top and bottom. See it at www.option9.com/home.php

    I want to avoid using float. Please help me find an alternate way to vertically align my list items to the middle so my div.box does not have extra spacing.
    Anyones?
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    The vertical-align property aligns inline elements and inline-block elements with respect to each other on the same line.

    I suggest you give "vertical-align:middle" and "display:table-cell" to "nav#services ul.navMenu".

    Are you aware that your page contains HTML errors?
    http://validator.w3.org/

    P.S. Did you intentionally decide not to support IE8 and IE7?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    159
    Rep Power
    31
    Originally Posted by Kravvitz
    The vertical-align property aligns inline elements and inline-block elements with respect to each other on the same line.

    I suggest you give "vertical-align:middle" and "display:table-cell" to "nav#services ul.navMenu".

    Are you aware that your page contains HTML errors?
    http://validator.w3.org/

    P.S. Did you intentionally decide not to support IE8 and IE7?
    I am aware of the validation errors. I am switching from xhtml to html5, but still using the same meta data from my config files. Can you give me more info of how I am no longer supporting IE7/8? I am unaware of the such.

IMN logo majestic logo threadwatch logo seochat tools logo