CODEWITHSUNDEEP
javascriptjqueryhtml
Priyanka
Priyanka

Reputation: 103

How to create a menu tree using HTML

I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this. Can anyone help me solve this problem. Thanks in advance.

Upvotes: 10

Views: 50555

Answers (7)

ANeves
ANeves

Reputation: 6395

You don't need to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)

You can make vertical dropdown menus or (prettier example) horizontal menus using the techniques explained in the Sons of Suckerfish article at HTMLDog.
Simple and meaningful.

Sample

Here is a simple example. In it you can see the hover functionality working perfectly.

The CSS is not good, because it's only a sample.
To work on the style, disable the display: none; line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none; line to get the submenus to hide and only show on hover.

HTML

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
<p>Not collapsing:</p>
<ul>
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
</nav>

CSS

nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}

Here is a jsfiddle: http://jsfiddle.net/x8dxv/

Upvotes: 3

IsmailS
IsmailS

Reputation: 10863

Here is something very simple to start with.

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

EDIT

Implementing what I learned from @sushil bharwani. Here is how I found the above URL i.e. at the courtesy of @sushil bharwani http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

Upvotes: 8

Wai Wong
Wai Wong

Reputation: 2843

I am not sure if you will find your answer, but here is a list with several different types of vertical menus http://css.maxdesign.com.au/listamatic2/index.htm no javascript is involved in those examples

Upvotes: 0

Gert Grenander
Gert Grenander

Reputation: 17104

You might want to look into some of the online tools that builds the menu for you. E.g. CSS Menu Generator

Upvotes: 0

Mantisimo
Mantisimo

Reputation: 4283

Here is a simply way to do it if you don't want to write one yourself..

http://www.mycssmenu.com/#css-menu-demo

Upvotes: 0

Kangkan
Kangkan

Reputation: 15571

Navigation menus are mostly created using a combination of UL and LI.

<UL id="Menu">
    <LI>Home</LI>
    <LI>Links</LI>
</UL>

And you can insert UL inside LI element and thus get a tree structure for navigation.

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30217

With a bit of javascript and a knowledge around CSS you can convert a simple UL LI list to a menu tree. its right that you can use jQuery if you understand it.

You can narrow your google search by Menu Tree using UL Li. or CSS to convert UL LI to tree.

Upvotes: 2

Related Questions