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
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image navigation with rollover dropdown menus

    Hi all,

    I'm trying to create a navigation bar like this one: http://www.columbia.com/

    I've sliced up a similar horizontal navigation in Photoshop. How do I go about tackling this in code? What does this code look like? Do I need to use Javascript?

    I know this may be a large general question, but I just want the basics so I can start going about it on my own. Where do I start really?

    Thanks all.

  • #2
    New Coder
    Join Date
    Jun 2012
    Location
    Atlanta, Georgia, United States
    Posts
    34
    Thanks
    0
    Thanked 8 Times in 8 Posts
    You can examine the structure of their navigation by viewing their source.

    They have an unordered list consisting of list items that have both an anchor, and a nested list in each.

    Here's a rough example of what they have:

    Code:
    <ul>
        <li>
            <a>Foo</a>
            <ul>
                <li>Nested Item</li>
            </ul>
        </li>
        <!-- more list items -->
    </ul>
    Now you could choose to show the nested details via a JavaScript handler, or via CSS. You'll have broader, more reliable support using JavaScript, but CSS will get you taken care of in all modern browsers.

    Using CSS, you could show the nested element when the parent is hovered:

    Code:
    li:hover > ul {
        display: block;
    }
    The JavaScript route would be to attach handlers to each of the list-items in the parent UL. You'd have to handle both the mouseover and mouseleave events. This would be slightly verbose with raw JavaScript, but could be reduced with jQuery:

    Code:
    $("ul").on("mouseenter mouseleave", "li", function( e ){
        $("ul", this).toggle( e.which === "mouseenter" );
    });
    When a list item is entered with the mouse, any nested UL element(s) will be shown. When the li loses the mouse, they will be hidden.

  • Users who have thanked jonathansampson for this post:

    brandonmai (06-26-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Now I have this code:

    <div id="menu">
    <ul class="tabs">
    <li class="hasmore"><a href="#"><span id="bird"></span></a>
    <ul class="dropdown">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
    </li>
    <li class="hasmore"><a href="#"><span id="wild"></span></a>
    <ul class="dropdown">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
    </li>

    </ul>
    I have a background images attached to those <SPAN> tags in CSS, how do I get rid of the 5px white space between the two spans?

  • #4
    New Coder
    Join Date
    Jun 2012
    Location
    Atlanta, Georgia, United States
    Posts
    34
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by brandonmai View Post
    ...how do I get rid of the 5px white space between the two spans?
    It's impossible to tell what is causing the space you're referring to. Can you post a
    link to the page online, or perhaps setup an example on http://jsfiddle.net?


  •  

    Posting Permissions

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