Wednesday, February 12, 2014

How to Create simple Dynamic menu using HTML and CSS

Here Goes the HTML PART please add below css page in to your html part(header section)
<link href="test_css.css" rel="stylesheet" type="text/css">
_________________________________________________________________________________
<div>
  <ul id="trans-nav">
 <li class="active"><a href="#" target="_top">Dash Board</a></li>
 <li><a href="#">My Account</a></li>
 <li><a href="#">Manage Trials</a>
  <ul>
   <li><a href="#">Add Trial Manager</a></li>
   <li><a href="#">View Trials</a></li>
  </ul>
 </li>
 <li><a href="#" target="_top">Manage Category</a>
 <ul>
    <li><a href="#" target="_top">Create Crop</a></li>
     <li><a href="#" target="_top">Create Category</a></li>
     <li><a href="#" target="_top">Create Sub Category</a></li>
 </ul>
  <li><a href="#" target="_top">Reports</a></li>
  <li><a href="#" target="_top">Logout</a></li>
 </li>
 </ul>
</div>
_________________________________________________________________________________
Here is the CSS part save it give any name for ex xy.css
_________________________________________________________________________________
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; left:225px; padding: 0; line-height: 90px; min-width:150px;  background: #279174; }
#trans-nav li:hover { background-position: center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #a3f1d7; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 15em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #63867f; }
#trans-nav li ul li a:hover { background: #279174; }