In the post this time, You deserve for it. This post shows you how to create dropdown menus.
Dropdown menus is very important for a site that makes a lot of pages and categories.
Let us consider how to create it. Please try to follow in the steps as follows.
This way I assume we’re ceating a theme from scratch. Let’s we try it.
1. Create a new folder to contain your theme files, for example = dropdown-menu1.
2. Under dropdown-menu1 folder, create two new folders with name =css and = js
3. Copy the code below and paste it into notepad, then save with name = dropdown.css. And save into css folder.
4. Copy the code below and paste it into notepad, then save with name = style.css . And save into css folder.
@charset “UTF-8″;
@import “default.css”;
/*——————————————————————-/
* @section Base Style Extension
*/
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 5px 30px;
}
/*——————————————————————–/
* @section Base Style Override
*/
ul.dropdown li {
padding: 0;
}
ul.dropdown ul a,
ul.dropdown ul span { /* POI, proposal: override abstract a, span */
padding: 8px;
}
/*——————————————————————-/
* @section Base Style Reinitiate: post-override activities
*/
ul.dropdown *.dir { /* POI */
padding: 5px 30px;
}
ul.dropdown ul *.dir {
padding: 8px 30px 8px 8px;
}
/*——————————————————————-/
* @section Custom Styles
*/
ul.dropdown ul a {
width: 133px;
}
ul.dropdown ul a.dir {
width: 111px;
}
/*——————————————————————-/
* @section Support Class `open` Usage
* @source js, artificial
*
*/
ul.dropdown *.open {
background-color: #3d3d3d;
}
ul.dropdown ul *.open {
background-color: #4c4c4c;
color: #fff;
}
ul.dropdown ul ul *.open {
background-color: #595959;
color: #fff;
}
/* Override UPPER TWO definitions */
ul.dropdown a.open:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul a.open:hover {
color: #fff;
}
/* Clone in CSS 2 */
ul.dropdown li:hover > *.dir {
background-color: #3d3d3d;
}
ul.dropdown ul li:hover > *.dir {
background-color: #4c4c4c;
}
ul.dropdown ul ul li:hover > *.dir {
background-color: #595959;
color: #fff;
}
/* Override UPPER TWO definitions */
ul.dropdown li:hover > a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul li:hover > a.dir:hover {
color: #fff;
}
5. Copy the code below and paste it into notepad, then save with name = default.css . And save into css folder.
@charset “UTF-8″;
/*—————————————————————————/
@section Style Framework */
/* First-level expected directory tag – li */
ul.dropdown li {
padding: 5px;
}
ul.dropdown *.dir {
padding-right: 30px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* Non-first level */
ul.dropdown ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
background-image: url(images/nav-arrow-right2.png);
}
/* Components override */
ul.dropdown-vertical *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
/*————————————————————————/
@section Base Drop-Down Styling */
/* ALL LEVELS (incl. first) */
ul.dropdown {
font: bold 17px/normal Arial, Helvetica, sans-serif;
}
ul.dropdown li {
background-color: #333;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
}
/* Links */
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
background-color: #4498c7;
color: #fff;
}
ul.dropdown ul a.dir:hover { /* proposal */
background-color: #4698ca;
background-image: url(images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown a:active {
background: #058acf url(images/nav-sub-press.png) 0 0 repeat-x !important;
color: #fff;
}
/* NON-FIRST LEVEL */
ul.dropdown ul {
left: auto;
right: 0;
width: 150px;
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
ul.dropdown ul ul ul li {
background-color: #595959;
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
6.. Copy the code below and paste it into notepad, then save with name = index.html (for testing, if it’s ok you can change to be index.php later) . And save into under dropdown-menu1 folder.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Black CSS Drop-Down Menu</title>
<!– Start –>
<link href=”css/dropdown.css” media=”screen” rel=”stylesheet” type=”text/css” />
<link href=”css/style.css” media=”screen” rel=”stylesheet” type=”text/css” />
<!–[if lt IE 7]>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.dropdown.js”></script>
<![endif]–>
<!– / END –>
</head>
<body>
<h1>Black CSS Drop-Down Menu Theme</h1>
<!– Beginning of compulsory code below –>
<ul id=”nav” class=”dropdown dropdown-horizontal”>
<li><a href=”./”>Home</a></li>
<li><a href=”./”>OS</a>
<ul>
<li><a href=”./”>Windows</a>
<ul>
<li><a href=”./”>Windows1</a></li>
<li><a href=”./”>Windows2</a></li>
<li><a href=”./”>Windows3</a></li>
<li><a href=”./”>Windows4</a></li>
<li><a href=”./”>Windows5</a></li>
<li><a href=”./”>Windows6</a></li>
<li><a href=”./”>Windows7</a></li>
</ul>
</li>
<li><a href=”#”>Linux</a>
<ul>
<li><a href=”./”>Redhat</a></li>
<li><a href=”./”>Ubuntu</a></li>
<li><a href=”./”>Centos</a></li>
<li><a href=”./”>Redhat2</a></li>
<li><a href=”./”>Ubuntu2</a></li>
<li><a href=”./”>Centos2</a></li>
<li><a href=”./”>Redhat3</a></li>
<li><a href=”./”>Ubuntu3</a></li>
<li><a href=”./”>Centos3</a></li>
</ul>
</li>
<li><a href=”./”>Unix</a></li>
<li><a href=”./”>Mac</a>
<ul>
<li><a href=”./”>10</a></li>
<li><a href=”./”>11</a></li>
</ul>
</li>
<li><a href=”./”>Mobile</a></li>
</ul>
</li>
<li<a href=”./”>Tutorial</a>
<ul>
<li><a href=”./”>Wordpress</a></li>
<li><a href=”./”>Blog</a></li>
<li><a href=”./”>Paypal</a></li>
<li><a href=”./”>PDF</a></li>
<li><a href=”./”
target=”_blank”>Office</a></li>
</ul>
</li>
<li><a href=”./”>Ebook</a></li>
<li><a href=”#”>Free Download</a></span></li>
</ul>
<!– / END –>
</body>
</html>
Finishhhhh…!!
For Online Demo,
For Download All File Above,
If you want to apply on your site for pages and category, you can see THIS POST.
Related posts:
of course, we should use not just css…
but javascript too