Skip to main content

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


a


 Final look of our template is like 


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

<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>

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>



Assinement solved by 
karishma Bokariya (MCA II ) IMSCDR, Ahmedangar
HTml5 CSS3 session

Popular posts from this blog

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

what is Blogger

what is Blogger, what is Blogger short info, Blogger hindi information,  Blogger.com एक फ्री Blog Publishing Platform है. जिसकी सहायता से Free Blog बनाकर Texts, Images, Videos आदि आसानी से शेयर की जा सकती है. और दुनिया को अपने लेखन कौशल से अवगत कराया जा सकता है. Blogger की गिनती Content Management Systems में होती है. क्योंकि यह Content को Yearly, Monthly, Weekly, Daily, Catigarically, Labels आदि के द्वारा Manage करता है. और ये सभी Entry पाठकों के लिए उपलब्ध रहती है. Google Blogger Kya Hai in Hindi Blogger पर जो ब्लॉग बनाया जाता है. वह blogspot.com का Sub-Domain होता है. जो Google Server पर Hosted रहता है. Blogger Users गूगल सर्वर को Access नही कर पाते है. लेकिन गूगल अकाउंट से उन्हे Blogger Dashboard पर अनुमति मिल जाती है. इसलिए वे अपना Blog Manage आसानी से कर सकते. Blogspot.com के अलावा Users को Country Specifit Domain Name भी उपलब्ध करवाया जाता है. मिसाल के तौर पर एक Indian Blogger Users अगर अपना ब्लॉग बनाता है तो वह blogspot.com के स्थान पर blogspot.in का चुनाव कर

how to add a youtube video to your website html

embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html, Use following steps 1. Create basic html page 2. Login to your Google account 3. Visit  www.youtube.com 4. Search video you want to add in your website 5. Select video  6. Click on share button at bottom  you can see share option   7. Click on embed as shown  8. Copy code and paste in html page save and run html page  embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html,