How to Create a Simple CSS Menu?
I wonder how I can have and create a CSS Menu. Don’t worry we’re here to help you how to create a simple CSS menu. First we need to find what CSS menu we want, should it be neat or 3D Menu or maybe we want something more Attractive.
The CSS Menu (Navigation Menu) is very important element for a Blog or Website. Most of Blogs are given already navigation menu tutorials, but I will give you the code of a Simple CSS Menu. Hope you might like this menu that I brought here for you.
Copy Code and Paste on your Blog!
HTML
<ul id="navigation">
<li>
<a href="index.html" class="main">Home</a>
</li>
<li>
<a href="#" class="main">Technology</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">Help Me</a></li>
<li><a href="#">How do I</a></li>
<li><a href="#">News</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">Tutorial</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML/CSS</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">About me</a>
</li>
<li>
<a href="#" class="main">Contact</a>
</li>
</ul>
CSS
a, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;
transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
-moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
-webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;
}
#navigation {
position: relative;
text-align:center;
margin:0 auto;
background-color:deepskyblue;
border-bottom: 2px solid red;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 20px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 6px;
background: #fff;
border-top: 1px solid #fff;
padding:0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #F8B3B3;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
background: red;
border-bottom: 1px solid red;
color: #3b3b3b;
text-decoration: none;
}
No Comment to " How to create Simple CSS Menu "