Jump to content
xisto Community
Sign in to follow this  

Dropdown/dropline Menus Any simple ones out there?

Recommended Posts

Hey all! It's been a while since I've shown my face around here, but I figured you folks would be just the sort to give me a pointer towards what I'm looking for.


So, I'm in the process of creating a website (pretty much from scratch), and it's come to the stage where I've got to spruce up the navigation bar a little. I'm not all that confident in CSS to take too big a stab at what I want to do myself, and any examples I can find either don't fit the HTML structure I'm looking for, seem overly messy (have 101 variations depending on browser - although that's mainly IE's fault), have some funky CSS syntax or have a thousand lines of code.


In essence, what I'm after is a menu system that is:


Customisable - i.e. I can change background colours, images, and the contents of the menu without having to worry too much about changing the CSS to keep up

Either entirely CSS-based, or a combination of CSS and JavaScript (I'm a complete newbie to JS, so would rather not include it if possible)

Either dropdown or dropline (I'm not overly fussed which)

Lightweight - i.e. don't require a massive chunk of CSS to implement

Simple - no fancy rounded corners and so on, please

I gather that a Google search of any combination of the words "menu" "css" "dropdown" "dropline" and so on will turn up more results than you can shake a stick at, but 90% of them either don't fit my criteria or wouldn't fit my site, plus I have a lot of difficulty picking them apart to work out how they do what they do. In an ideal world I'd like to have it built from scratch so I don't have copyright issues to worry about and get a decent understanding of how to make them in the process, but this is by no means necessary.


Suggestions are welcome!


For those wondering, the HTML for my menu has a structure similar to the following:


<div id="nav">	<ul>		<li><a href="">Item 1</a></li>		<li><a href="">List 1</a>			<ul>				<li><a href="">List 1.1</a></li>				<li><a href="">List 1.2</a></li>				<li><a href="">List 1.3</a></li>			</ul>		</li>		<li><a href="">List 2</a>			<ul>				<li><a href="">List 2.1</a></li>				<li><a href="">List 2.2</a></li>				<li><a href="">List 2.3</a></li>			</ul>		</li>		<li><a href="">Item 2</a></li>	</ul></div>

Share this post

Link to post
Share on other sites

Yeah, I'm looking for something like that as well, I've been posting at Xisto forums and no one seems to be replying, so I might make a thread on it somewhere...

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.