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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multi-Level Navbar with Images

    Hello all,

    I have been in search of a particular navigation bar concept. I have seen examples of dropdown menus with disjointed rollovers, but only for a single level.

    I am looking for what to call -or how to refer to- a multilevel navbar which has at least one sublevel of choices AND disjointed rollovers.

    I have been trying to search the web for some time now and was looking at www.whitehouse.gov and www.attwireless.com for their wide-width dropdowns but they have static text.

    The closest I found recently is www.aiononline.com on the "game guide" tab.
    In this concept, I can have major categories on the left, one layer of subitems for each on the right, and then a disjointed rollover function on the far right in place of the static text that is there.

    I am sure this is do-able, but is it practical? Can it be done? HAS it been done? Would it be hard coded? Could it sit on a custom CMS?

    I have a specific application in mind for a client who is a manufacturer. They do not have hundreds of products and would like to showcase their top products right from the homepage without any clicks or redirects. By providing them only rollover navigation through their categories and actual products, the user can visually navigate to what they need quickly, and above the fold.

    What the heck would this type of navigation be called?

    The best I could come up with is "multi level navigation with images" but it is difficult to find examples with this search, or dozens of variations of it.

    Thanks for any help in advance.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Use following code and you can use any HTML elements instead of children <ul> ...



    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>Menu 2</title>
    <style type="text/css">
    ul {
        list-style:none;
    }
    a {
        text-decoration:none;
        font:12px Verdana, Geneva, sans-serif;
        text-align:center;
        line-height:26px;
    }
    #menu {
        z-index:1px;
    }
    #menu li {
        display:block;
        float:left;
        width:100px;
        z-index:1px;
        position:relative;
    }
    #menu li a {
        display:block;
        float:left;
        width:100%;
        border:1px solid #aaaaaa;
        background:#eeeeee;
        color:#000;
        margin-left:20px;
    }
    #menu li a:hover {
        border:1px solid #777777;
        background:#DBDBDB;
        color:#000;
        margin-left:20px;
    }
    #menu ul{
        display:none;
        width:140px;
        z-index:10px;
        position:absolute;
        top:29px;
        left:2px;
    }
    #menu ul li a{
        display:block;
        width:100%;
        color:#3D3D7A;
        border:1px solid #7979BD;
        background:#BCBCDE;
    }
    </style>
    <script src="jquery.js" type="application/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
                               
      $("#menu li").hover(function(){
    $("#menu ul").slideUp(10);
      $("ul", this).slideDown(1000);
      });
    });
    </script>
    </head>
    
    <body>
    <ul id="menu">
      <li><a href="#">Menu 1</a><ul>
      <li><a href="#">Sub Menu 1.1</a></li>
      <li><a href="#">Sub Menu 1.2</a></li>
      <li><a href="#">Sub Menu 1.3</a></li>
      <li><a href="#">Sub Menu 1.4</a></li>
      <li><a href="#">Sub Menu 1.5</a></li>
      <li><a href="#">Sub Menu 1.6</a></li>
      <li><a href="#">Sub Menu 1.7</a></li>
    </ul></li>
      <li><a href="#">Menu 2</a><ul>
      <li><a href="#">Sub Menu 2.1</a></li>
      <li><a href="#">Sub Menu 2.2</a></li>
      <li><a href="#">Sub Menu 2.3</a></li>
      <li><a href="#">Sub Menu 2.4</a></li>
      <li><a href="#">Sub Menu 2.5</a></li>
      <li><a href="#">Sub Menu 2.6</a></li>
      <li><a href="#">Sub Menu 2.7</a></li>
    </ul></li>
      <li><a href="#">Menu 3</a><ul>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.2</a></li>
      <li><a href="#">Sub Menu 3.3</a></li>
      <li><a href="#">Sub Menu 3.4</a></li>
      <li><a href="#">Sub Menu 3.5</a></li>
      <li><a href="#">Sub Menu 3.6</a></li>
      <li><a href="#">Sub Menu 3.7</a></li>
    </ul></li>  
      <li><a href="#">Menu 4</a><ul>
      <li><a href="#">Sub Menu 4.1</a></li>
      <li><a href="#">Sub Menu 4.2</a></li>
      <li><a href="#">Sub Menu 4.3</a></li>
      <li><a href="#">Sub Menu 4.4</a></li>
      <li><a href="#">Sub Menu 4.5</a></li>
      <li><a href="#">Sub Menu 4.6</a></li>
      <li><a href="#">Sub Menu 4.7</a></li>
    </ul></li>
      
      <li><a href="#">Menu 5</a><ul>
      <li><a href="#">Sub Menu 5.1</a></li>
      <li><a href="#">Sub Menu 5.2</a></li>
      <li><a href="#">Sub Menu 5.3</a></li>
      <li><a href="#">Sub Menu 5.4</a></li>
      <li><a href="#">Sub Menu 5.5</a></li>
      <li><a href="#">Sub Menu 5.6</a></li>
      <li><a href="#">Sub Menu 5.7</a></li>
      </ul></li>
    </ul>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code is not functional, as I tested it. It is also nothing like the concept I am after. I am also NOT LOOKING FOR CODE OR EXAMPLES OF CODE. I need to know what it is called, and find working examples of this concept. Then I will have my developer worry about code.
    Look closer at the aiononline example found when hovering over the "game guide" tab.


  •  

    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
    •