Html Menu control for ASP.NET Website

HTML MENU CONTROL FOR ASP.NET

A html menu control example in ASP.NET to make your webpage look more professional. Good alternative to traditional looking menu control. Inbuilt asp.net menu control in Visual Studio has got very limited functionality. So here’s a very good looking asp.net menu control made with HTML (ul and li). Comment below, do let me know what you think about this code.

asp.net menu control 1

ASPX PAGE CODE :


<div>
 <nav id="mymenu">
<ul>
 <li><a href="#">Home</a></li>
 
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a></li>
 
 <li><a href="#">Menu 3.1</a>
 <ul>
 <li><a href="#">Menu 3.1</a></li>
 <li><a href="#">Menu 3.2</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 4</a>
 <ul>
 <li><a href="#">Menu 4.1</a></li>
 <li><a href="#">Menu 4.2</a></li>
 </ul>
 </li>
 </ul>
</nav>
 </div>

And its CSS :

<style type="text/css">
 #mymenu
 {
 margin-top: 15px;
 margin-left: 10px;
 }
 #mymenu ul
 {
 list-style: none;
 position: relative;
 float: left;
 margin: 0;
 background-color:#000;
 padding: 0;
 }
 #mymenu ul a
 {
 display: block;
 color: #ffffff;
 text-decoration: none;
 font-weight: lighter;
 font-size: 15px;
 line-height: 32px;
 padding: 0 15px;
 font-family: 'Montserrat' , sans-serif;
 }
 #mymenu ul a : hover
 {
 color: #000;
 }
 #mymenu ul li
 {
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 }
 #mymenu ul li.current-menu-item > a
 {
 color: #ff4a4a;
 }
 #mymenu ul li:hover > a
 {
 color: #ff4a4a;
 }
 #mymenu ul ul
 {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 background: #000;
 padding: 0;
 }
 #mymenu ul ul li
 {
 float: none;
 width: 200px;
 }
 #mymenu ul ul a
 {
 line-height: 120%;
 padding: 10px 15px;
 }
 #mymenu ul ul ul
 {
 top: 0;
 left: 100%;
 }
 #mymenu ul li:hover > ul
 {
 display: block;
 }
 </style>



asp.net menu control 2asp.net menu control 3



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.