Hello Friends,
In these Tutorials we see "How to Build Horizontal CSS Round Menu.
CSS Code :
<style type="text/css">
#menu_hr
{
background:#141414;
width:100%;
}
#menu_hr ul
{
width:auto;
padding:10px;
}
#menu_hr ul li
{
list-style-type:none;
display:inline;
padding-right:5px;
}
#menu_hr ul li a
{
background:#6699cc;
padding:7px 15px 7px 15px;
text-decoration:none;
color:#ffffff;
border-radius:20px;
}
#menu_hr ul li a:hover
{
background:#006699;
padding:7px 15px 7px 15px;
text-decoration:none;
color:#ffffff;
border-radius:20px;
}
</style>
Create HTML Page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Example_Menu" %>
<!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">
<head runat="server">
<title></title>
----- ADD CSS CODE ----
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="menu_hr">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Noftification</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
0 Komentar untuk "Horizontal CSS Round Menu for asp.net"