Create Cirular Menu using Html5 Css3

Creating Circular shape or oval shape menu using HTML and css

Step 1: Create or download image you want here we are going to use different background image as shown to set menu hover . as follows

Menu hour left and menu hover right this two images we are going to use

Final look of our template is like

Step 2: create a HTML page ovalshapemenu.HTML following code in body tag

<body>

<h1>Wonders Of world</h2>

<ul>

<li><a href="#"><span></span>Gallery</a></li>

<li><a href="#"><span></span>Forum</a></li>

<li><a href="#"><span></span>About Us</a></li>

<li><a href="#"><span></span>Enquiry</a></li>

<li><a href="#"><span></span>Contact Us</a></li>

</ul>

</div>

<h6>Taj Mahal</h6>

<h6>Great Wall of China</h6>

<h6>Statue Of Liberty</h6>

</div>

<h6>Pyramid</h6>

<h6>Eiffel Tower</h6>

<h6>Statue Of Liberty</h6>

</div>

Taj mahal was created by Shahjahan.

</div>

</body>

Step 3: write CSS Class or Copy paste following CSS code to to <head> tag

<html><head>
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
padding:5px;
float:left;
}
#nav1{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
padding:5px;
float:right;
}
#section{
width:350px;
float:left;
padding:10px;
}
#templatemo_menu {
   clear: both;
    width: "100%";
   height: 42px;
   background: url(images/templatemo_menu_bg.jpg) repeat-x;
}

#templatemo_menu ul {
   float: left;
   margin: 0px;
   padding: 0 0 0 20px;
   list-style: none;
}

#templatemo_menu ul li {
   margin: 0px;
   padding: 0px;
   display: inline;
}

#templatemo_menu ul li a {
   position: relative;
   float: left;
   display: inline-block;
   height: 30px;
   width: 130px;
   margin-right: 10px;
   text-align: center;
   padding: 12px 0 0 0;
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;
   color: #ffffff;
   outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
   position: relative;
   color: #ffffff;
   background: url(images/templatemo_menu_hover_right.jpg) top right no-repeat;
}

#templatemo_menu li a:hover span, #templatemo_menu li .current span   {
   position: absolute;
   display: inline-block;
   width: 15px;
   height: 42px;
   top: 0;
   left: 0;
   background: url(images/templatemo_menu_hover_left.jpg) no-repeat;
}
#footer{
background-color:black;
color:white;
text-align:center;
padding:5px;
clear:both;
}
</style>
</head>

complete code is save this code ascircularmenutemplate.html put menu image in images folder

<html>
<head>
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
padding:5px;
float:left;
}
#nav1{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
padding:5px;
float:right;
}
#section{
width:350px;
float:left;
padding:10px;
}
#templatemo_menu {
    clear: both;
    width: "100%";
    height: 42px;
    background: url(images/templatemo_menu_bg.jpg) repeat-x;
}

#templatemo_menu ul {
    float: left;
    margin: 0px;
    padding: 0 0 0 20px;
    list-style: none;
}

#templatemo_menu ul li {
    margin: 0px;
    padding: 0px;
    display: inline;
}

#templatemo_menu ul li a {
    position: relative;
    float: left;
    display: inline-block;
    height: 30px;
    width: 130px;
    margin-right: 10px;
    text-align: center;
    padding: 12px 0 0 0;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
    position: relative;
    color: #ffffff;
    background: url(images/templatemo_menu_hover_right.jpg) top right no-repeat;
}

#templatemo_menu li a:hover span, #templatemo_menu li .current span    {
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 42px;
    top: 0;
    left: 0;
    background: url(images/templatemo_menu_hover_left.jpg) no-repeat;
}

#footer{
background-color:black;
color:white;
text-align:center;
padding:5px;
clear:both;
}
</style>
</head>
<body>
<div id="header">
<h1>Wonders Of world</h2>
<div id="templatemo_menu" width="100%">
        <ul>
            <li><a href="#" class="current"><span></span>Home</a></li>
            <li><a href="#"><span></span>Gallery</a></li>
            <li><a href="#"><span></span>Blog</a></li>
            <li><a href="#"><span></span>Forum</a></li>
            <li><a href="#"><span></span>About Us</a></li>
        <li><a href="#"><span></span>Enquiry</a></li>
          <li><a href="#"><span></span>Contact Us</a></li>
        </ul>
</div>
</div>

<div id="nav">
<h6>Taj Mahal</h6>
<h6>Great Wall of China</h6>
<h6>Statue Of Liberty</h6>
</div>
<div id="nav1">
<h6>Pyramid</h6>
<h6>Eiffel Tower</h6>
<h6>Statue Of Liberty</h6>

</div>
<div id="section">
Taj mahal was created by Shahjahan.
</div>
<div id="footer">
CopyRight @ karishma Bokariya</div>
</body>
</html>

you can download html circulare shape menu tempate click here

Assinement solved by

karishma Bokariya (MCA II ) IMSCDR, Ahmedangar

HTml5 CSS3 session

Design Marathi website Using HTML CSS

Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages Design Marathi website Using HTML CSS, Design Marathi website Using PHP, Design Marathi website Using JSP, Design Marathi website Using ASP, Design Marathi website Using C# Dot Net, Design Marathi website Using Vb Dot Net, मराठी वेबसाईट मराठी वेबसाईट बनवन अगदी सोप आहे मी या ब्लॉग मध्ये दिलेल्या स्टेप्स वापरून तुम्ही काही क्षणात मराठी वेब पेज तयार करू शकता Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages Design Marathi website U

HTML5 CSS3

Search This Blog