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
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/HTML Menu Bar

    Hi everyone, im new here and looking for some help

    Essentially what I need to create is a vertical menu bar that uses css/html only and includes sub menus.
    The best example of what I need can be seen on the following site:
    http://treboethhistorygroup.com/
    If you see the menu bar on the left, I need something like that.
    Thing is that was created using Dreamweaver (its a Spry menu bar).
    Can that sort of thing be replicated using CSS/HTML only?
    Does anyone know any basic code that could help get me started?
    Many thanks for any help.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you can look at their script with inspect element






    i think they used javascript for the hover, but you can use something like this http://css.maxdesign.com.au/listamat...rizontal04.htm which is pure css
    Last edited by Sammy12; 08-08-2011 at 01:01 AM.

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It's a bit difficuilt doing this, using only HTML and CSS. It can be done but I dont recommend it, since you have little control over the flow and the timing of the menu. But, if you want, it is possible. It basically works like this:

    Code:
    li ul {display: none;}
      li:hover > ul {display: block;}
    The 2nd line lets you display the ul whenever you hover over the li.

    For more info and in depth tutorials about this:
    http://www.howtocreate.co.uk/tutorials/testMenu.html
    http://pressography.com/tutorials/css-only-hover-menu/

    the first one describes the pros and cons of using only html and css, so that might be helpful in your case


  •  

    Posting Permissions

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