SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make Nav Bar work when Javascript is turn off?

    I used Deamweaver Spry to create this Navbar but it does not work with Javascript turned off.

    Is there a way around this?

    Here's a link to the navbar http://www.patrickjudson.com/Navigation.html

    This nav bar does not drop down with Javascript turned off.
    The links still works when you click on them but the roll over is a dead beat.

    Any ideas?

    IC

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Well, my first choice would to not use Spry, and just hand code it.

    This particular menu is actually quite easy to create in pure CSS. Check out this article on Suckerfish: http://www.alistapart.com/articles/dropdowns

    It will function identically to that menu.

    --------------------------------------------

    For the sake of argument though, to make it work properly without Javascript you would have to use CSS to create the rollover. Then, the rollover effect itself (the color change), will always work.

    If you don't do it with CSS, then your only other option is to make the menu headers be links to pages which give you the options that the drop-down provides. In fact, even if you do use CSS you should still do this as it's a good practice.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which was updated at http://www.htmldog.com/articles/suckerfish/dropdowns - there's even an accessible version of the menu system available; just search for "Accessible Suckerfish Dropdown Menu" in your search engine of choice.

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey everyone, thanks for all the help and replies.

    However I created this Nav Bar based on a template I found on the net.

    Everything appears to be working well except that the sub menus disappears too fast, so fast that it is difficult or almost impossible to click on the sub menus.

    This is the nav bar: http://www.patrickjudson.com/testNav.html
    How do I make the sub menu stay long enough to be able to click on it?
    It seem the sub menu disappears as soon as the mouse moves away from it.

    Take a look.

    This is the html code.
    Code:
    <ul id="nav">
    	<li class="top"><a href="#nogo1" class="top_link"><span>Welcome</span></a></li>
    	<li class="top"><a href="#nogo2" class="top_link"><span>About Sanquine</span></a></li>
        
    	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
    		<ul class="sub">
    			<li><a href="#nogo23">Printing</a></li>
    			<li><a href="#nogo24">Photo Framing</a></li>
    			<li><a href="#nogo25">Retouching</a></li>
    			<li><a href="#nogo26">Archiving</a></li>
    		</ul>
    	</li>
    	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span>Contact Us</span></a></li>
    		
    	<li class="top"><a href="#nogo57" class="top_link"><span>Privacy Policy</span></a></li>
    </ul>
    This is the Stylesheet:
    Code:
    S.preload1 {background: url(three_1.gif);}
    .preload2 {background: url(three_1a.gif);}
    
    #nav {
    	padding:0;
    	margin:0;
    	list-style:none;
    	height:35px;
    	background:#fff url(three_0.gif) repeat-x;
    	position:relative;
    	z-index:500;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #nav li.top {
    	display:block;
    	height:35px;
    	float: left;
    	margin-left: 20px;
    }
    #nav li a.top_link {
    	display:block;
    	float:left;
    	height:35px;
    	line-height:33px;
    	color:#FFFFFF;
    	text-decoration:none;
    	font-size:12px;
    	font-weight:bold;
    	cursor:pointer;
    	background: url(three_0.gif);
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 12px;
    }
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
    #nav li a.top_link span.down {
    	float:left;
    	display:block;
    	height:35px;
    	background: url(three_0a.gif) no-repeat right top;
    	padding-top: 0;
    	padding-right: 24px;
    	padding-bottom: 0;
    	padding-left: 12px;
    }
    
    #nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {
    	background:url(three_1a.gif) no-repeat right top;
    	
    }
    
    /* Default list styling */
    
    #nav li:hover {position:relative; z-index:200;}
    
    #nav li:hover ul.sub
    {
    	left:1px;
    	top:38px;
    	background: #bbd37e;
    	padding:3px;
    	border:1px solid #5c731e;
    	white-space:nowrap;
    	width:90px;
    	height:auto;
    	z-index:300;
    	margin-left: 3px;
    }
    #nav li:hover ul.sub li
    {
    	display:block;
    	height:20px;
    	position:relative;
    	float:left;
    	width:90px;
    	font-weight:normal;
    }
    #nav li:hover ul.sub li a
    {
    	display:block;
    	font-size:11px;
    	height:18px;
    	width:88px;
    	line-height:18px;
    	text-indent:5px;
    	color:#000;
    	text-decoration:none;
    	border:1px solid #bbd37e;
    }
    #nav li ul.sub li a.fly
    {
    	background:#bbd37e url(arrow.gif) 80px 6px no-repeat;
    }
    #nav li:hover ul.sub li a:hover 
    {background:#6a812c; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
    
    
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}
    
    #nav ul, 
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
    
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;} 
    
    
    And finally the Java Script:
    
    stuHover = function() {
    	var cssRule;
    	var newSelector;
    	for (var i = 0; i < document.styleSheets.length; i++)
    		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
    			{
    			cssRule = document.styleSheets[i].rules[x];
    			if (cssRule.selectorText.indexOf("LI:hover") != -1)
    			{
    				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
    				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
    			}
    		}
    	var getElm = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<getElm.length; i++) {
    		getElm[i].onmouseover=function() {
    			this.className+=" iehover";
    		}
    		getElm[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", stuHover);
    How do I make the sub menu stay longer to be able to click it?

    Thanks

    IC
    Last edited by spikeZ; Nov 15, 2008 at 05:48. Reason: added [code][/code] tags - please use them!

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That menu isn't keyboard accessible - I'd think about using another framework and just make it look like that.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator
    How do I make the sub menu stay longer to be able to click it?
    It disappears because it has a gap to it's parent for the mouse to jump.
    In your code above, remove the gap by setting the sublist top position to the actual height of the parent or to 100&#37;:
    Code:
    #nav li:hover ul.sub
    {
    left:1px;
    top:38px; /* should be 35px */
    background: #bbd37e;
    padding:3px;
    border:1px solid #5c731e;
    white-space:nowrap;
    width:90px;
    height:auto;
    z-index:300;
    margin-left: 3px;
    }
    Happy ADD/ADHD with Asperger's

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    If you want the subnav to appear away form the top menu bar then you need to add padding-top to the nested ul and then style the inner elements instead of adding the styling to the ul itself.

    Similar to this example.

    http://www.pmob.co.uk/temp/dropdown-...ransparent.htm

  9. #9
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want the subnav to appear away form the top menu bar then you need to add padding-top to the nested ul and then style the inner elements instead of adding the styling to the ul itself.

    Similar to this example.

    http://www.pmob.co.uk/temp/dropdown-...ransparent.htm
    I see the example but having trouble implementing it.
    When I increase the padding, it does not bring down or change the positing of the sub menu. However, it stretches the sub menu or widen it vertically.

    Again, if you add top-margin, it causes the sub menu to separate from the main menu. But you get the same problem, "cant click the sub menu.

    Can you give me a little code demonstration?

    IC

  10. #10
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    It disappears because it has a gap to it's parent for the mouse to jump.
    In your code above, remove the gap by setting the sublist top position to the actual height of the parent or to 100%:
    Code:
    #nav li:hover ul.sub
    {
    left:1px;
    top:38px; /* should be 35px */
    background: #bbd37e;
    padding:3px;
    border:1px solid #5c731e;
    white-space:nowrap;
    width:90px;
    height:auto;
    z-index:300;
    margin-left: 3px;
    }

    Thanks Erik, It works now but how do I place a gap or a space between the Main menu and the sub menu? Like say an 8px space.

    You have been a very great help and resource.

    Thanks again - IC

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    It works now but how do I place a gap or a space between the Main menu and the sub menu? Like say an 8px space.
    I already told you how lol

    You use padding top on the ul (or a border) so that the ul always stays in contact with the parent. Then you style the inner elements. Remove the styling from the ul itself so that it is blank (or background colour) and then style the lists themselves. The example I showed does just this

    Here it is in your code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test NavBar</title>
    <link href="masterNav/master_navControl.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.patrickjudson.com/masterNav/master_navScript.js"></script>
    <style>
    S.preload1 {
        background: url(http://www.patrickjudson.com/masterNav/three_1.gif);
    }
    .preload2 {
        background: url(http://www.patrickjudson.com/masterNav/three_1a.gif);
    }
    #nav {
        padding:0;
        list-style:none;
        height:35px;
        background:#fff url(http://www.patrickjudson.com/masterNav/three_0.gif) repeat-x;
        position:relative;
        z-index:500;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        width: 780px;
    }
    #nav li.top {
        display:block;
        height:35px;
        float: left;
        margin-left: 20px;
    }
    #nav li a.top_link {
        display:block;
        float:left;
        height:35px;
        line-height:33px;
        color:#FFFFFF;
        text-decoration:none;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        background: url(http://www.patrickjudson.com/masterNav/three_0.gif);
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 12px;
    }
    #nav li a.top_link span {
        float:left;
        display:block;
        padding:0 24px 0 12px;
        height:35px;
        background: url(http://www.patrickjudson.com/masterNav/three_0.gif) right top no-repeat;
    }
    #nav li a.top_link span.down {
        float:left;
        display:block;
        height:35px;
        background: url(http://www.patrickjudson.com/masterNav/three_0a.gif) no-repeat right top;
        padding-top: 0;
        padding-right: 24px;
        padding-bottom: 0;
        padding-left: 12px;
    }
    #nav li:hover a.top_link {
        color:#fff;
        background: url(http://www.patrickjudson.com/masterNav/three_1.gif) no-repeat;
    }
    #nav li:hover a.top_link span {
        background:url(http://www.patrickjudson.com/masterNav/three_1.gif) no-repeat right top;
    }
    #nav li:hover a.top_link span.down {
        background:url(http://www.patrickjudson.com/masterNav/three_1a.gif) no-repeat right top;
    }
    /* Default list styling */
    
    #nav li:hover {
        position:relative;
        z-index:200;
    }
    #nav li ul.sub {
        border-top:25px solid #fff;
        border-bottom:1px solid #5c731e;
        height:auto;
        z-index:300;
        margin-left: 3px;
    }
    #nav li:hover ul.sub {
        left:1px;
        top:35px;
    }
    #nav li:hover ul.sub li {
        display:block;
        height:20px;
        position:relative;
        float:left;
        clear:left;
        width:93px;
        font-weight:normal;
        background: #bbd37e;
        border:1px solid #5c731e;
        border-bottom:none;
        white-space:nowrap;
        padding:3px;
    }
    #nav li:hover ul.sub li a {
        display:block;
        font-size:11px;
        height:18px;
        width:88px;
        line-height:18px;
        text-indent:5px;
        color:#000;
        text-decoration:none;
        border:1px solid #bbd37e;
    }
    #nav li ul.sub li a.fly {
        background:#bbd37e url(http://www.patrickjudson.com/masterNav/arrow.gif) 80px 6px no-repeat;
    }
    #nav li:hover ul.sub li a:hover {
        background:#6a812c;
        color:#fff;
        border-color:#fff;
    }
    #nav li:hover ul.sub li a.fly:hover {
        background:#6a812c url(http://www.patrickjudson.com/masterNav/arrow_over.gif) 80px 6px no-repeat;
        color:#fff;
    }
    #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
        left:90px;
        top:-4px;
        background: #bbd37e;
        padding:3px;
        border:1px solid #5c731e;
        white-space:nowrap;
        width:90px;
        z-index:400;
        height:auto;
    }
    #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {
        position:absolute;
        left:-9999px;
        top:-9999px;
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {
        background:#6a812c url(http://www.patrickjudson.com/masterNav/arrow_over.gif) 80px 6px no-repeat;
        color:#fff;
        border-color:#fff;
    }
    #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {
        background:#bbd37e url(http://www.patrickjudson.com/masterNav/arrow.gif) 80px 6px no-repeat;
        color:#000;
        border-color:#bbd37e;
    }
    </style>
    </head>
    <body>
    <span class="preload1"></span> <span class="preload2"></span>
    <ul id="nav">
        <li class="top"><a href="#nogo1" class="top_link"><span>Welcome</span></a></li>
        <li class="top"><a href="#nogo2" class="top_link"><span>About Sanquine</span></a></li>
        <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
            <ul class="sub">
                <li><a href="#nogo23">Printing</a></li>
                <li><a href="#nogo24">Photo Framing</a></li>
                <li><a href="#nogo25">Retouching</a></li>
                <li><a href="#nogo26">Archiving</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span>Contact Us</span></a></li>
        <li class="top"><a href="#nogo57" class="top_link"><span>Privacy Policy</span></a></li>
    </ul>
    </body>
    </html>
    Adjust styling to suit

  12. #12
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I already told you how lol

    You use padding top on the ul (or a border) so that the ul always stays in contact with the parent. Then you style the inner elements. Remove the styling from the ul itself so that it is blank (or background colour) and then style the lists themselves. The example I showed does just this

    Here it is in yur code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test NavBar</title>
    <link href="masterNav/master_navControl.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.patrickjudson.com/masterNav/master_navScript.js"></script>
    <style>
    S.preload1 {
        background: url(http://www.patrickjudson.com/masterNav/three_1.gif);
    }
    .preload2 {
        background: url(http://www.patrickjudson.com/masterNav/three_1a.gif);
    }
    #nav {
        padding:0;
        list-style:none;
        height:35px;
        background:#fff url(http://www.patrickjudson.com/masterNav/three_0.gif) repeat-x;
        position:relative;
        z-index:500;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        width: 780px;
    }
    #nav li.top {
        display:block;
        height:35px;
        float: left;
        margin-left: 20px;
    }
    #nav li a.top_link {
        display:block;
        float:left;
        height:35px;
        line-height:33px;
        color:#FFFFFF;
        text-decoration:none;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        background: url(http://www.patrickjudson.com/masterNav/three_0.gif);
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 12px;
    }
    #nav li a.top_link span {
        float:left;
        display:block;
        padding:0 24px 0 12px;
        height:35px;
        background: url(http://www.patrickjudson.com/masterNav/three_0.gif) right top no-repeat;
    }
    #nav li a.top_link span.down {
        float:left;
        display:block;
        height:35px;
        background: url(http://www.patrickjudson.com/masterNav/three_0a.gif) no-repeat right top;
        padding-top: 0;
        padding-right: 24px;
        padding-bottom: 0;
        padding-left: 12px;
    }
    #nav li:hover a.top_link {
        color:#fff;
        background: url(http://www.patrickjudson.com/masterNav/three_1.gif) no-repeat;
    }
    #nav li:hover a.top_link span {
        background:url(http://www.patrickjudson.com/masterNav/three_1.gif) no-repeat right top;
    }
    #nav li:hover a.top_link span.down {
        background:url(http://www.patrickjudson.com/masterNav/three_1a.gif) no-repeat right top;
    }
    /* Default list styling */
    
    #nav li:hover {
        position:relative;
        z-index:200;
    }
    #nav li ul.sub {
        border-top:25px solid #fff;
        border-bottom:1px solid #5c731e;
        height:auto;
        z-index:300;
        margin-left: 3px;
    }
    #nav li:hover ul.sub {
        left:1px;
        top:35px;
    }
    #nav li:hover ul.sub li {
        display:block;
        height:20px;
        position:relative;
        float:left;
        clear:left;
        width:93px;
        font-weight:normal;
        background: #bbd37e;
        border:1px solid #5c731e;
        border-bottom:none;
        white-space:nowrap;
        padding:3px;
    }
    #nav li:hover ul.sub li a {
        display:block;
        font-size:11px;
        height:18px;
        width:88px;
        line-height:18px;
        text-indent:5px;
        color:#000;
        text-decoration:none;
        border:1px solid #bbd37e;
    }
    #nav li ul.sub li a.fly {
        background:#bbd37e url(http://www.patrickjudson.com/masterNav/arrow.gif) 80px 6px no-repeat;
    }
    #nav li:hover ul.sub li a:hover {
        background:#6a812c;
        color:#fff;
        border-color:#fff;
    }
    #nav li:hover ul.sub li a.fly:hover {
        background:#6a812c url(http://www.patrickjudson.com/masterNav/arrow_over.gif) 80px 6px no-repeat;
        color:#fff;
    }
    #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
        left:90px;
        top:-4px;
        background: #bbd37e;
        padding:3px;
        border:1px solid #5c731e;
        white-space:nowrap;
        width:90px;
        z-index:400;
        height:auto;
    }
    #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {
        position:absolute;
        left:-9999px;
        top:-9999px;
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {
        background:#6a812c url(http://www.patrickjudson.com/masterNav/arrow_over.gif) 80px 6px no-repeat;
        color:#fff;
        border-color:#fff;
    }
    #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {
        background:#bbd37e url(http://www.patrickjudson.com/masterNav/arrow.gif) 80px 6px no-repeat;
        color:#000;
        border-color:#bbd37e;
    }
    </style>
    </head>
    <body>
    <span class="preload1"></span> <span class="preload2"></span>
    <ul id="nav">
        <li class="top"><a href="#nogo1" class="top_link"><span>Welcome</span></a></li>
        <li class="top"><a href="#nogo2" class="top_link"><span>About Sanquine</span></a></li>
        <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
            <ul class="sub">
                <li><a href="#nogo23">Printing</a></li>
                <li><a href="#nogo24">Photo Framing</a></li>
                <li><a href="#nogo25">Retouching</a></li>
                <li><a href="#nogo26">Archiving</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span>Contact Us</span></a></li>
        <li class="top"><a href="#nogo57" class="top_link"><span>Privacy Policy</span></a></li>
    </ul>
    </body>
    </html>
    Adjust styling to suit

    Sorry Paul, I already figured it out.

    Basically, I increased the top padding and then change the background to transparent so that it shows the back drop behind the sub menu.

    And then I could mess with the other elements.

    I think the confusion was the language.

    But it's basically what you were saying.

    Thanks you so much for your time a patients.

    I'm sure I'll be calling on for your help in the future.

    This is the navbar: http://www.patrickjudson.com/testNav.html

    IC

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Glad you sorted it and yes it's often hard to understand what someone is getting at on first sight

    I should point out that if you don't specify a background color for the ul then you will still lose the focus in IE6 and the menu will disappear before you get to it. In my example I used a white top border to hold focus. Yu culd set a white background rather than a transparent one.

    Or you could use the fake image trick and supply a 1px x 1px fully transparent background image for the ul and this will hold focus also.

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator
    ...
    Basically, I increased the top padding and then change the background to transparent so that it shows the back drop behind the sub menu.
    ...
    I didn't realize you wanted the gap, sorry.

    Just tinking; Maybe you could have just increased the parent li height to 38px by a 3px bottom padding to overflow and match the sub ul position. As long as the background is 35px high it could work in IE6 too. Or maybe a 3px negative bottom margin on th li.

    Why the doubled defalt background on both the main ul and the main links? It could be removed from the links. Intead the main link/span could be used to preload the hover backgrounds:
    Code CSS:
    #nav li a.top_link {
    	...
    	background: url(three_1.gif) -999px no-repeat;
    }
    #nav li a.top_link span {
    	...
    	background: url(three_1a.gif) -999px no-repeat;
    }
    Happy ADD/ADHD with Asperger's

  15. #15
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I didn't realize you wanted the gap, sorry.

    Just tinking; Maybe you could have just increased the parent li height to 38px by a 3px bottom padding to overflow and match the sub ul position. As long as the background is 35px high it could work in IE6 too. Or maybe a 3px negative bottom margin on th li.

    Why the doubled defalt background on both the main ul and the main links? It could be removed from the links. Intead the main link/span could be used to preload the hover backgrounds:
    Code CSS:
    #nav li a.top_link {
    	...
    	background: url(three_1.gif) -999px no-repeat;
    }
    #nav li a.top_link span {
    	...
    	background: url(three_1a.gif) -999px no-repeat;
    }

    Thanks so much Erik, you have been such a great help!
    Honestly, I post a lot of question in the Adobe Forum but I have noticed that over there you get scolded a lot, it's like people are just very condescending. I say this because you have been very helpful and you don't make me feel like I'm stupid even though I'm thinking about being a plumber.

    By the way, I tried removing the doubled default background on both the main ul and the main links but it did not align right, there were pieces of the image missing I think I needed to mess with the padding. However, everything appears to be working.

    I do have another question. How do you create a menu like this that have rounded corners on the last sub menu item?

    Notice the rounded corners at the bottom. I believe it's an image.

    This is the link. http://www.mediatemple.net/

    IC

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Notice the rounded corners at the bottom. I believe it's an image.
    You can place the round image on the last list item or even use an empty list item if necessary although its better to utilise existing elements than add unnecessary ones.

    The example I posted above has round corners but uses empty list elements which isn't ideal but was simplest for the demo (especially with the transparency involved).

    Hope that make sense

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Notice the rounded corners at the bottom. I believe it's an image.
    If you used my version of your code from post #11 you could simply add the rounded bottom image to the bottom of the ul itself. Just add some padding bottom to the ul and apply your image at the 100&#37; position. In my example the ul is free from styling and therefore you can cap the bottom quite nicely without borders being in the way as they are contained on the list elements instead.

  18. #18
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you used my version of your code from post #11 you could simply add the rounded bottom image to the bottom of the ul itself. Just add some padding bottom to the ul and apply your image at the 100&#37; position. In my example the ul is free from styling and therefore you can cap the bottom quite nicely without borders being in the way as they are contained on the list elements instead.
    Look at this menu: http://www.patrickjudson.com/hover_drop_1.html
    It's a different design and I added the rounded image to the last li tag of all the sub menu instead of the ul tag which I am going to try also.

    There are two problems I 'm having with this menu.
    1) This Menu does not work in IE-6

    2) there is a very slight flicker when you click on the last li tag that contained the rounded image.

    I don't think it's a delay with the background image loading because I'm using the sprits method or whatever it's called.

    I have tried all I can to get rid of the flicker, it's very subtle.


    Any ideas.

    Thanks so much for your time and patience.

    IC

  19. #19
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator
    There are two problems I 'm having with this menu.
    1) This Menu does not work in IE-6

    2) there is a very slight flicker when you click on the last li tag that contained the rounded image. ...
    1. I would recommend the Suckerfish Dropdown method instead of that javascript created table dropdown for IE6. The Suckerfish just adds a dynamic sfhover-class on the li at li-hover for IE6.

    2. The "flicker" is due to the "#menu any-hover first child a" selector. It can be fixed by removing the first child a, because the link will be painted #090 when the mouse hovers the li border, there are other solutions also:
    Code:
    #menu :hover > a{
    	color:#fff;
    	background-color: #009900;
    	margin: 0px;
    	padding: 0px;
    }
    Happy ADD/ADHD with Asperger's

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Yes, I agree with Eric and you are really making things hard for yourself with these complicated menus. The suckerfish is much simpler (and was the method shown in my first example ).

    I see little point in using javascript to add Stu Nichols invalid nested anchor table routines when the point was that his routines work when javascript is switched off. You would therefore be better using the simpler suckerfish method in the first place


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
  •