menu code

[woopwoop]

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?

 

[bensd]

All you're doing is creating two separate nav menus, so in your html you need something like this:

<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

 

[woopwoop]

All you're doing is creating two separate nav menus, so in your html you need something like this:

<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

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.

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.

Thanks I'll take a look.

 

[martin-s]

Allow me to recommend MegaMenu:

http://codecanyon.net/item/mega-menu-reloaded/1593152

 

[woopwoop]

How about this:
http://codepen.io/seemly/pen/pvjjGG

Allow me to recommend MegaMenu:

http://codecanyon.net/item/mega-menu-reloaded/1593152

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.

 

[woopwoop]

You don't need JavaScript for the dropdown menu. All CSS will work.

Updated the example I provided:
http://codepen.io/seemly/pen/pvjjGG

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...

 

[accelerator]

Wish there was a way to click to buy you a couple of pints...

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

 

[accelerator]

IMO your site would benefit from a prominent tagline or slogan showing the purpose and mission statement.

 

[woopwoop]

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.