Grow your CSS skills. Land your dream job.

Fly out navigation- 3rd level

  • # April 17, 2013 at 6:23 am

    Kindly help me out in making further dropping out navigation on right side.
    kindly take a look at http://www.clockhousedesign.co.uk/achievetec

    in navigation product > ruggedised > * – e1 phone
    - e2 phone
    - e3 phone

    *these three items i want to drop right (or fly out on right side – whateva you say)

    need help here

    # April 17, 2013 at 6:39 am

    Sorry, page timed out. Couldn’t see it.

    Do you mean this is a vertical menu on, say the left of the page, with the initial menu items stacked up and the sub-menu items fly-out to the right?

    Here’s one I copied quickly from a Google Search.: http://codepen.io/Paulie-D/pen/pIhur

    # April 17, 2013 at 8:00 am

    thanks for response.

    actually of you go to website there is horizontal navigation. under product there is first list item ruggedised. I want it to further open to the right and list few more items (i.e under ruggedised )

    so it would be like this

    product > ruggedised > – (first item) e1 phone – (2nd item) e2 phone – (third) e3 phone

    Did you get what i am tryin to say..?

    thanks once again

    # April 17, 2013 at 8:06 am

    Couldn’t get your page to load before…but it worked this time.

    You mean like this: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

    # April 17, 2013 at 8:11 am

    Absolutely Spot on!.. thanks a lot

    but the navigation code I am using (taken from some tutorial) is driving me nuts. Could you figure out where to add?

    thanks

    # April 17, 2013 at 8:21 am

    where to add what?

    # April 17, 2013 at 8:38 am

    Hi i tried as follow
    In third level navigation
    html

    `

    css

    .sub-nav {
    position: absolute;
    width: 100%;
    visibility: hidden;
    }
    .sub-nav > li, .sub-nav > li a {
    display: block;
    width: 100%;
    }

    it didn’t show up as expected, instead it showed just beneath the 2nd level first list item (i.e ruggedised)
    can you help me out where I am making mistake

    thanks

    # April 17, 2013 at 8:41 am

    the bullet point it showed up is actually html code

    < *html ul class="sub-nav">

  • ES400 Durable Smartphone
# April 17, 2013 at 9:32 am

The third level menu should have a class of `.tert-nav` (for tertiary navigation) not `.sub-nav`.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".