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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu with 3 rows

    Hi all,
    I am new to the forum and not very competent in programming.

    I would like to ask your help for something I cannot implement: I have the following javascript code for my menu.

    Code:
    <style type="text/css"> 
    body {
    	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    .container {
       float:left;
       width:100%;
       background:url(IMG/topnav2.jpg);
       margin: 0 auto;
    }
    ul#topnav {
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       left:50%;
       text-align:center;
    }
    ul#topnav li {
       display:block;
       float:left;
       margin:0;
       padding:0;
       position:relative;
       right:50%;
       border-right: 1px solid #555;
    }
    ul#topnav li a {
       display:block;
       padding: 8px 16px;
       color:#f0f0f0;
       text-decoration:none;
    }
    ul#topnav li:hover {background::url(IMG/topnav1.jpg);}
    ul#topnav li span {
    	float: left;
    	padding: 8px 0;
    	position:fixed;
    	left: 0; top:29px;
    	display: none;
    	width: 100%;
    	background:url(IMG/topnav180.jpg);
    	border-bottom: 1px solid #69430F;
    	color: #fff;
    }
    
    ul#topnav li:hover span { display: block; }
    ul#topnav li span a { display: inline; }
    ul#topnav li span a:hover {text-decoration:underline;}
    
    </style>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() {
    	
    $("ul#topnav li").hover(function() { //Hover over event on list item
    	$(this).css({ 'background' : ' url(IMG/topnav1.jpg) repeat-x'}); //Add background color + image on hovered list item
    	$(this).find("span").show(); //Show the subnav
    } , function() { //on hover out...
    	$(this).css({ 'background' : 'none'}); //Ditch the background
    	$(this).find("span").hide(); //Hide the subnav
    });
    	
    });
    
    </script>

    Then there is the code in the <body> section:


    Code:
    <div class="container">	
        <ul id="topnav"> 
            <li><a href="home.html" target="_top">HOME</a></li> 
            <li> 
                <a href="company.html" target="_top">ABOUT THE COMPANY</a> 
                <span> 
                    <a href="history.html" target="_top">HISTORY</a> |
                    <a href="mission.html" target="_top">MISSION - OBJECTIVES</a>  
                </span> 
    </li> 
            <li> 
                <a href="products.html" target="_top">PRODUCTS</a> 
                <span> 
                    <a href="PRODUCT1.html" target="_top">PRODUCT1</a> |
                    <a href="PRODUCT2.html" target="_top">PRODUCT2</a> 
                 
                </span>
        </li> 
        </ul> 
    	
    </div>

    So far it works great.

    Now I want to add a submenu under the "PRODUCT1", this means a third line of menu, where I can list SUB-PRODUCT1, ........

    Can you help me with the code?
    Thank you very much.
    Best Regards
    L.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Most dropdown menus are done in css with minimal js. Look at this page for instructions
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    And look here for demo of three tiered menu
    http://www.htmldog.com/articles/suck...le/bones3.html

    You can style the way you want so don't judge on how it looks.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    @sunfighter

    Well thank you very much for the links!
    I will work on it.
    Br
    L.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    @sunfighter

    Unfortunately I cannot understand how to change the code in order to obtain the third line menu.

    Can you help me out a little bit, because I can't understand where I have the <span> tag, which defines the 2nd line menu, what is the tag I should add for the 3rd line? <span li>? I really don't understand. Unfortunately I am not familiar with this kind of stuff.

    I need a little advice...
    Thank you
    br
    L.


  •  

    Tags for this Thread

    Posting Permissions

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