Grow your CSS skills. Land your dream job.

A slide out sub navigation

  • # August 5, 2010 at 12:01 pm

    The task… create a sub navigation that slides out from under the parent button an the left of the site out to the right.

    On my site I am working on I have 7 menu buttons in the top left in a vertical fashion. the bottom three I would like to have sub menus slide out to the right revealing other options.

    You see this a lot sliding down from a horizontal nave bar but i have not seen it slide horizontally. I have seen a concept at

    http://tympanus.net/Tutorials/FixedNavigationTutorial/

    that is some what of what I am looking for however it is just revealing a button. I want to reveal three buttons having the parent be the trigger that reveals.

    If you have seen something like this or have an idea that I can try that would be great… I have little to no Javascripting knowledge other than being able to figure out Plug ins others have done… So any education or solution provided is very much appreciated.

    # August 5, 2010 at 1:43 pm

    I made one http://www.visibilityinherit.com/code/slide-in.php

    Or you got your basic flyout menu http://www.visibilityinherit.com/code/flyout.php

    # August 5, 2010 at 2:34 pm

    Hey Eric those are good. the idea I had is still different for example many of your sample slid out but the resulting sub menu was still vertical. The task i am working on is to get the sub menu to slid out horizontal..

    I made an illustration and posted the screen capture on a page using the prototype navigation I have so far. Even though the side bar overlaps the image it should give you a good idea as to what I have in mind. Tell me what you think.

    Kind Regards,
    Jeff

    # August 5, 2010 at 3:04 pm

    I don’t see your screen capture. But that is easy enough. That slide out is all CSS. Just make the sub ul wider and float all the sub li’s left. That should work.

    # August 5, 2010 at 3:23 pm

    here is a link to the screen capture…

    I will try what you are saying.. I just want it to be reviled only after a mouse over event has occurred on the parent button.

    http://pathfinderdirectory.com/images/S … .28CDT.png

    # August 5, 2010 at 5:53 pm

    it would help if I could spell Reviled… needs to say Revealed

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

You must be logged in to reply to this topic.

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