Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help adding submenu to pure css navigation

    I am hoping someone can help me edit my css and html to add another submenu to two drop down menus -- solutions and plans. I want the same styling as I already have for the drop down menus for the added drop down menus.

    My CSS and HTML is as follows:

    #navigation{
    width:auto;
    text-align: center;
    height:25px;
    padding: 15px;
    background-image: url(../images/navbg.jpg);
    border-top-width: thin;
    border-bottom-width: thin;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #dddddd;
    border-bottom-color: #999999;
    }

    #navigation ul
    {margin:0px; padding:0px;}


    #navigation ul li
    {display:inline; height:30px; float:left; list-style:none; margin-right:5px; margin-left:10px;}

    #navigation li a
    {
    color:#76b0c6;
    font-weight: bold;
    font-family: "Bradley Hand ITC", Scriptina, sans-serif;
    text-decoration:none;
    font-size: medium;
    }

    #navigation li a:hover
    {
    color:#006699;
    text-decoration:none;
    }

    #navigation li a:visited
    {
    color:#4a3931;
    text-decoration:none;
    }
    #navigation li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    background-image: url(../images/ddbg.jpg);
    }

    #navigation li:hover ul
    {
    display:block;
    width:160px;
    }

    #navigation li li
    {
    list-style:none;
    display:list-item;
    }
    navigation ul li
    {
    display:inline;
    height:30px;
    float:left;
    list-style:none;
    margin-left:5px;

    position:relative;
    }

    #navigation li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    }

    #navigation li:hover ul
    {
    display:block;
    width:160px;
    }

    #navigation li li
    {
    list-style:none;
    display:list-item;
    }
    #navigation ul li
    {
    display:inline;
    height:30px;
    float:left;
    list-style:none;
    margin-left:15px;

    position:relative;
    }
    #navigation li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-image: url(../images/ddbg.jpg);
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-top-style: dashed;
    }
    #navigation li li a
    {color:#76b0c6; text-decoration:none;}

    #navigation li li a:hover
    {color:#006699; text-decoration:none;}
    #header {
    background-image: url(../images/headerbg.jpg);
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;}


    <div id="navigation">
    <ul>
    <li>
    <a href="../index.htm">Home</a>

    </li>


    <li>
    <a href="../coaching.htm">item</a>
    <ul>
    <li><a href="#">sub menu item 1</a></li>
    <li><a href="#">sub menu item 2</a></li>
    <li><a href="#">sub menu item 3</a></li>
    <li><a href="#">sub menu item 4</a></li>
    </ul>

    <li>
    <a href="../solutions.htm">Solutions</a>
    <ul>
    <li><a href="../solutions.htm?tab=0#TabbedPanels1?">Planning</a></li>
    <li><a href="../solutions.htm?tab=1#TabbedPanels1?"> Development</a></li>
    <li><a href="../solutions.htm?tab=2#TabbedPanels1">Design</a></li>
    <li><a href="../solutions.htm?tab=3#TabbedPanels1">Marketing</a></li>
    <li><a href="..solutions.htm?tab=4#TabbedPanels1">Analysis</a></li>
    </ul>
    </li>

    <li>
    <a href="../strategic_plans.htm"> Plans</a>
    <ul>
    <li><a href="../strategic_plans.htm?tab=1#TabbedPanels2?">Plans</a></li>
    <li><a href="../strategic_plans.htm?tab=2#TabbedPanels2?">Plans</a></li>
    <li><a href="../strategic_plans.htm?tab=3#TabbedPanels2?">Plans</a></li>

    </ul>
    </li>

    <li>
    <a href="../customer_service.htm">Customer Service</a>
    <ul>
    <li><a href="../customer_service.htm?tab=0#TabbedPanels1?">Business Hours</a></li>
    <li><a href="../customer_service.htm?tab=1#TabbedPanels1?">Business Address</a></li>
    <li><a href="../customer_service.htm?tab=2#TabbedPanels1?">Business Phone</a></li>
    <li><a href="../customer_service.htm?tab=3#TabbedPanels1?">Email</a></li>
    </ul>
    <li>
    <a href="../community.htm">Community</a>
    <ul>
    <li><a href="../community.htm?tab=0#TabbedPanels1?">item</a></li>
    <li><a href="../community.htm?tab=1#TabbedPanels1?">item</a></li>
    <li><a href="../community.htm?tab=2#TabbedPanels1?">item</a></li>
    <li><a href="../community.htm?tab=3#TabbedPanels1?">item</a></li>

    </ul>
    </li>


    </ul>
    </li>


    </li>


    </ul>
    </div>
    </div>

    <div align="center">
    <!-- end #header -->
    </div>
    </div>


    Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I'm not sure on what u mean cause I checked ur nav it looks the same to, what exactly are you after?
    Last edited by PitbullMean; 02-16-2009 at 10:44 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help adding submenu to pure css navigation

    What i am wanting to do is add another sub category drop down level to what I already have.

    For example:
    I already have plans and solutions so I want to add another level to
    plans> business plans> small business plan home business plan etc

    solutions>marketing> direct marketing

    So when the visitor moves their mouse over plans and it drops down to business plans I want another category to come out on the side and drop down with another list with small business plan, home business plan etc.

  • #4
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help adding submenu to pure css navigation

    Yes this is similar to what I am after BUT this one using javascript and i want pure css. Like this menu I do want to add the 3rd level sub categories.

  • #6
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    This is one I made. You can actually get rid of the JavaScript if you please, and it'll work everywhere except Internet Explorer 6 and under. It's necessary, even on yours, because IE6 and under have no support for :hover on li (or any tag except hyperlinks). Just get rid of:

    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]>
    </script>
    and the CSS bits that are used for it (parts in red):

    Code:
    /* Increase "#nav li:hover ul ul ul+" and "#nav li.sfhover ul ul ul+" for each additional level */
    #nav li:hover ul ul, 
    #nav li.sfhover ul ul {
    	left: -999em;
    }
    /* Increase "#nav li li+ li:hover ul" and "#nav li li+ li.sfhover ul" for each additional level */
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li.sfhover ul,
    #nav li li.sfhover ul {
    	left: 0;
    	z-index: 100; /* Important: ensures drop down menus appear over other content on the Z-axis */
    	background-color: #FFF; /* Important: background (color at least) required here for IE7 bug */
    	border: solid 1px #CCC;
    }
    And you can add as many levels as you want with this.
    Last edited by Majoracle; 02-16-2009 at 11:23 PM.

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Nice, But I dont know why you are so CSS bound cause using Javascript you would be compatible with browsers across the board.
    Last edited by PitbullMean; 02-16-2009 at 11:18 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Here's a 3-level one with no JavaScript: http://majoracle.webs.com/dropdownme...level-nojs.htm

    It'll work in all browsers except IE6 and under. I do still recommend the JavaScript though, because it's only applied in IE, and for quite a few IE users, a necessity.
    Last edited by Majoracle; 02-16-2009 at 11:27 PM.

  • #9
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I convinced Mindy to use Javascript Im going to be helping her with this. That way she has a cross the board compatibility.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Quote Originally Posted by PitbullMean View Post
    Nice, But I dont know why you are so CSS bound cause using Javascript you would be compatible with browsers across the board.
    If the CSS is done right, there are not many cross-browser compatibility problems which are impossible to solve. Granted, it requires some tweaking every now and then, but for some of us that is the fun part!

    Some users might have Javascript disabled, and in general, they are also a bigger strain on CPU than CSS is. On top of that, pure CSS layout is considered an art.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #11
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Rarely do you see people have Javascript disabled. cause Alot of sites use it, from Youtube, to Hotmail.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for all of your responses. Pure css sounds to be too difficult for me. So, I am game for the javascript nav menu to save myself some headaches. I look forward to the help.

  • #13
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I guess I am one of those old-fashioned developers who still believe Javascript could definately be used to enhance browsing experience, but it should never be a necessity in order to browse a website.

    Yes, Hotmail and Youtube use it. I am inclined to say "So what?". I turned JS off in my browser and did some testing. Hotmail gives a message that Javascript needs to be turned on, which is not a perfect solution but at least they are giving a message. Youtube says absolutely nothing, the login button just doesn't do anything when JS is turned off. For such a succesful website, that is at least disappointing.

    But hey, as I said, guess I'm just old-fashioned.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #14
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Mindy I pmed you my MSN ID, If you need the help Ill gladly give it to you and also give u step by step instructions.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #15
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Alright, if you're gonna help her off this forum, you understand everything in mine, right? It's not typical Sons of Suckerfish. I fixed a lot of bugs in it.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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