 |
| Drop Down Menu |
This post will talk about creating drop down menu with CSS easily. The CSS use the function to hide and display the child menu when its parent hovered.
I have analized and then adopted the css file from Joomla CMS template called ja_purity to simply create a drop down menu. This code makes a menu that has a child will show its child menu when we hover on it (parent menu).
I divide the explanation into 2 parts, first part is using a static HTML code, the second part is using the dynamic data from database will be explained in the other post.
Drop Down Menu for Static Page (HTML)
In this section, we use a static HTML code just to show how the css works. In the next section we will create menus with dynamic data from the database.
Lets begin.
First, we have to create an HTML file. Simply you can copy and paste the codes below.
Drop Down Menu for Static Page (HTML)
In this section, we use a static HTML code just to show how the css works. In the next section we will create menus with dynamic data from the database.
Lets begin.
First, we have to create an HTML file. Simply you can copy and paste the codes below.
<head>
<link rel="stylesheet" href="css/ja-sosdmenu.css" type="text/css" />
</head>
<body>
<div id="ja-mainnav">
<ul class="menu">
<li><a href="#"><span>HOME</span></a></li>
<li class="parent"><a href="#"><span>DROP DOWN</span></a>
<ul>
<li class="parent"><a href="#"><span>First Child</span></a>
<ul>
<li><a href="#"><span>Grand Child 1</span></a></li>
<li><a href="#"><span>Grand Child 2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>CATALOG</span></a></li>
<li><a href="#"><span>FAQ</span></a></li>
<li><a href="#"><span>CONTACT</span></a></li>
</ul>
<div>
</body>
Next, copy the css file that you can download it here, extract to the same folder as the HTML file. Test it on browser, we should see a parent menu on the top, then if we hover the FAQ menu, it will show its child menu.
The important part is you have to make the div id or div class has the same name with the declared in the css file. this means if you want to change the id or class name, you should change the class/id name in the css file too.
css file link broken
ReplyDelete