CSS - Navigation Links Side Menu

Question

I have a links navigation that drops down on hover (which works fine) then slides right on hover of the li ul li element.

HTML:

<div id="main-links">

    <div id="main-links-content">

        <ul class="topnav">

            <li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
            <li><a class="link" href="#!">About Us</a>
                <ul class="dropdown">
                    <li><a href="#!">Who are we?</a>
                        <ul>
                            <li><a href="#">Meet the team</a></li>
                        </ul>
                    </li>
                    <li><a href="#!">Why use us?</a>
                        <ul>
                            <li><a href="#">Health & Safety Policy</a></li>
                        </ul>
                    </li>
                    <li><a href="#!">Our commitment to the environment</a>
                        <ul>
                            <li><a href="#">Environmental Policy</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Our Services</a></li>
            <li><a class="link" href="#!">Our Tours</a></li>
            <li><a class="link" href="#!">Our Fares</a></li>
            <li><a href="#">Online Booking</a>
                <ul class="dropdown">
                    <li><a href="onlinebooking-ab/login-cash.php">Cash Booking</a></li>
                    <li><a href="onlinebooking-ab/login.php">Account Booking</a></li>
                    <li><a href="onlinebooking-ab/login-guest.php">Credit Card Booking</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Contact Details</a></li>
        </ul>

    </div>

</div>

The JSFiddle link: http://jsfiddle.net/mrnaysilva/3Ucd4/

I believe the problem is here (but I may be wrong):-

#main-links-content ul ul ul {
    left: 100%;
    position: absolute;
    top: 80px;
    width: 180px;
    max-width: 200px;
}

Basically I have set a width and top position. What I want to happen is that the width is set to auto, but when I set this to auto it doesn't set a width according to the paragraph text that's inside it. Also, because I have set a top position, it is always displaying the side menu on the bottom li, where as I want this to display to the right of the li element that is hovered.

i.e. If I hover over About Us and then hover over Who are we?.. Meet the team should display to the right of Who are we?.

I'm just unsure how I can achieve this.

I would start by not using jquery(specifically the toggle event) for your hover. It's queuing up hover events - if you hover on and off about a bunch of times, it will continue to open and close the menu once you mouse off. — Sean Beck
– Sean Beck, Commented Nov 15, 2013 at 15:40
I use hoverIntent which sorts that problem, it's just I couldn't use this as its a plugin which i couldn't add to jsfiddle — nsilva
– nsilva, Commented Nov 15, 2013 at 16:25

nkmol · Accepted Answer · 2013-11-18 13:34:49Z

4

+50

The problem

The main problem that isn't working is the position: relative; of the sub <li> elements.

This is because you use display: table-row;

As stated in the specs:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position

How to solve this?

Well you can just use an element inside the table-row that will have the position: relative; property:

<li>
  <div class="dropdownWrap">
    <a href="#!">Our commitment to the environment</a>
    <ul>
      <li>
         <a href="#">Environmental Policy</a>
      </li>
    </ul>
  </div>
</li>

Where the css of the .dopdownWrap is:

.dropdownWrap
{
    width: 100%;
    height: 100%;
    position: relative;
}

jsFiddle

Note that i only did this with the "About us" tab.

Some notes about the javascript

You can just find the direct child element with the > selector. This way you don't have to exclude elements with the .not() function. More info here

Instead of defining .slideUp() and .slideDown() seperately, you can define them in one line ( this is because your speed of the animation is the same) with slideToggle.

Some notes about the css + html

If you're assigning classes and IDs to your elements you might as well use them in your css. For example: you never call the class .dropdown in your css. There are more of these IDs and classes that are never used.

Hope this helped you!

Edit

The jQuery UI function slide will function as this, because it will only play the mouseout function when the mousein function has completed. Normally you could cancel the previous animation with .stop(). But seems that jQuery UI slide doesn't support this. So i suggest you to just use plain jQuery for this:

$("#main-links-content li ul li").hover(function () {
    $(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300)
}, function () {
    $(this).find(' > div > ul').stop(true).animate({left: ""}, 300);
});

Here a great article for this: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

I also added the .stop() function to the dropdown menu to fix any delay bugs.

jsFiddle

You may want to look at css transition, as it basically acts the same as you did now. Here an css transition example: jsFiddle
The first slideToggle is not done in css as it easier and 'better' in jQuery(With css there wouldn't be a dynamic height, which would result in delay in animation).

edited Nov 18, 2013 at 13:34

answered Nov 18, 2013 at 10:41

nkmol

8,1193 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nsilva Over a year ago

thanks for the help, however, I can't seem to hover over 'Enviromental Policy' without it ul element constantly sliding up and down on your jsFiddle @nkmol

nkmol Over a year ago

I see what you mean. I would suggest to just use jQuery for this. Check my update!

nsilva Over a year ago

thanks @nkmol - that's working great. The only thing I noticed now is that when you hover over About Us --> Who are we?, the 'Meet the Team' element has a set width, is there any way we can pad this out so it makes the whole li element a clickable link?

nkmol Over a year ago

Yes, that's possible: jsfiddle.net/3Ucd4/9 As you can see i have a hard time to overlay markups because you use so many !important's. I would suggest you to try to use as less as possible. Note that a more specific css selector has a higher priority. My last selector, as you might see, is longer but overlays all other markup because it has more priority.

Collectives™ on Stack Overflow

CSS - Navigation Links Side Menu

1 Answer 1

The problem

How to solve this?

jsFiddle

Some notes about the javascript

Some notes about the css + html

jsFiddle

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The problem

How to solve this?

Some notes about the javascript

Some notes about the css + html

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related