Enjoy unlimited access to all forum features for FREE! Optional upgrade available for extra perks.

menu code

Discussion in 'Scripts and Coding' started by woopwoop, Nov 28, 2014.

Thread Status:
Not open for further replies.
  1. woopwoop United States

    woopwoop Well-Known Member

    Joined:
    Jan 2007
    Posts:
    2,208
    Likes Received:
    36
    I'm trying to create a two layered menu bar like the BBC's here:
    http://www.bbc.com/news/uk/

    I'm having trouble finding the template for anything close and I've forgotten so much about the CSS (I was never really any good!)

    Can anyone point me in the direction of a resource that can help with this type of menu?
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
    IWA Meetup
     
  3. bensd United Kingdom

    bensd Well-Known Member

    Joined:
    Jan 2007
    Posts:
    5,103
    Likes Received:
    79
    All you're doing is creating two separate nav menus, so in your html you need something like this:

    Code:
    <div id="header">
         <div id="top">
              <ul id="menuone">
                   <li></li>
                   <li></li>
                   <li></li>
         </div>
         <div id="middle">
         </div>
         <div id="bottom">
              <ul id="menutwo">
                   <li></li>
                   <li></li>
                   <li></li>
         </div>
    </div>
    
    You can practice css menus here: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
     
  4. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,607
    Likes Received:
    493
    When I was starting out learning CSS, Stu Nicholls website was a "go to" place for CSS wizardry:

    CSS Play

    Loads of different menu types to choose from, so there should definitely be something there that suits.
     
  5. woopwoop United States

    woopwoop Well-Known Member

    Joined:
    Jan 2007
    Posts:
    2,208
    Likes Received:
    36
    Thanks. The styling is what I'm having trouble with. Also the action on the upper nav should open different links on the lower nav bar.

    Thanks I'll take a look.
     
  6. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,607
    Likes Received:
    493
  7. martin-s United Kingdom

    martin-s Well-Known Member

    Joined:
    Jul 2012
    Posts:
    3,468
    Likes Received:
    270
  8. woopwoop United States

    woopwoop Well-Known Member

    Joined:
    Jan 2007
    Posts:
    2,208
    Likes Received:
    36
    Thanks for both of those.

    I've been working on my own here (similar code to above) but the menu isn't consistently dropping and sometimes seems to get stuck (js error?). Does anyone know why a form may behave like this?

    I might have to scrap it and start over with code from the links above.
     
    Last edited: Nov 30, 2014
  9. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,607
    Likes Received:
    493
    You don't need JavaScript for the dropdown menu. All CSS will work.

    Updated the example I provided:
    http://codepen.io/seemly/pen/pvjjGG
     
    Last edited: Nov 30, 2014
  10. woopwoop United States

    woopwoop Well-Known Member

    Joined:
    Jan 2007
    Posts:
    2,208
    Likes Received:
    36
    Thanks for taking the time to help me - I used your code and tweaked it a bit here.

    Only a small problem but it seems to stick a bit when I go from "upcoming events" (the only dropdown) down to each of the sub items.

    Wish there was a way to click to buy you a couple of pints...
     
    Last edited: Nov 30, 2014
  11. accelerator United Kingdom

    accelerator Well-Known Member

    Joined:
    Apr 2005
    Posts:
    7,435
    Likes Received:
    115
    It's called PayPal ;)

    I'm sorry but I'm really not sure about the use of a hot dog stand in your logo, it just doesn't send the right message.

    Rgds
     
    Last edited: Nov 30, 2014
  12. accelerator United Kingdom

    accelerator Well-Known Member

    Joined:
    Apr 2005
    Posts:
    7,435
    Likes Received:
    115
    IMO your site would benefit from a prominent tagline or slogan showing the purpose and mission statement.
     
    Last edited: Nov 30, 2014
  13. woopwoop United States

    woopwoop Well-Known Member

    Joined:
    Jan 2007
    Posts:
    2,208
    Likes Received:
    36
    Thanks Accel. you were a big help too! I learnt a lot over the last 24 hours.

    Re: the logo, it was a concept that we came up with after doing all the contests and comparing similar sites... It's connected to the fact that at every single NYC attraction you see these and kids run to them. They're iconic here.

    All the market research that we've done has been really positive. The logo fits and really works for what we wanted so there is no way we're going to revisit the logo at this point !

    Thanks again for all your help.
     
Thread Status:
Not open for further replies.