Member Avatar for Momoe

Hello everyone. I am 1st year IT university student and I have to design an E-commerce website for my web design module. However, I do not know where to start exactly. I've decided to start off with a navbar for the home page. I do not have problems using simple menu designs. But my question is: how to make menus that look like the ones on Technorati.com or even DaniWeb? Does it use CSS or Javascript? If it does, I'd appreciate if you could give me some pointers on how or where should I start. I have experience using HTML and a bit of CSS, but not Javascript.

Edited by Momoe because: n/a
  • 4 Contributors
  • 5 Replies
  • 160 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by justcrowd2010
Member Avatar for macneato

If you talking about drop-downs.... you can use either. But i would probably stick with css. Alot easier to implement as well as no client-side processing. Most of the time we use them in lists. Interested in learning more... google

Member Avatar for EvolutionFallen

Did you draw a mock-up of your site first? This will help you figure out what you're trying to build. Once you have a mock-up built, I personally prefer to build my pages from the top down, although another alternative may be to build the overall frame of the page and then fill in all the little details like headers, navigation bars, content, and footer.

When you say menus that look like Technorati's or DaniWeb's, are you referring to horizontal menus, or drop-down menus? Horizontal menus are pretty simple, you just use CSS to set the <li> 's to display: none . From there you just have to style it as you'd like.

Now if you're referring to drop-down menus, those can be done with JavaScript. Just do a Google search for drop down menu tutorials. Some can be done with mostly CSS, but I don't think there are any that can be used across most browsers without using some JavaScript.

As for this page's nav bar, it's done with CSS. There is probably some JavaScript involved to make it work with IE, but I don't have time right now to wade through the source code to double-check. Just by glancing at it real quick with Firebug, it looks like it's mostly handled by CSS.

Hope that helps.
-EF

Member Avatar for Momoe

Thanks for the constructive feedback guys. It helped alot. I think I understand the use of lists when making the structure of horizontal drop-down menu. The thing is, I did not find anything about how to design those cool menu graphics (especially those ones with rounded corners). CSS menus don't look to cool without some nice graphics. Do I have to create the graphics for the menu backgrounds? Or are there certain tools that can help?

Member Avatar for EvolutionFallen

It's best to make it yourself, that way you have the most options and customizations available. But if you don't have access to the software, there are some menu-generating programs out there. There's one I used once at http://purecssmenu.com/. That may prove useful. Otherwise just Google for "drop down menu generator" or something along those lines.

Member Avatar for justcrowd2010

Momoe we have the same experience, I would like to thank also for the replies it really helped me. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.