Skip to main content

Creating attractive menu using html and css











Creating attractive menu using HTML and css


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

 Final look of our template is like 

 

 Step 2: create a HTML page attractive menu.html  following code in body tag




<body>
<div id="header">
<h1>Ahmednagar City Gallery</h1>
<div id="templatemo_menu">
                  
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact Us</a></li>
       
            </ul>       
       
        </div> <!-- end of templatemo_menu -->
</div>

<div id="nav">
History<br>
Tourist Spots<br>
Femous places <br>
Tourist Guide<br>
Femous Things <br>

</div>

<div id="section">
<h1>Ahmednagar is very nice city..</h1>
<h1>Ahmednagar is very nice city..</h1>
<h1>Ahmednagar is best city..</h1>
<p>
</p>
</div>
<div id="footer">
<h1>copyright@</h1>
</div>
</body>




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




<head>
<style>

    #header{
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
        }
   
     #templatemo_menu {
    float: left;
    width: 700px;

    align:center;
}

#templatemo_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

#templatemo_menu ul li a {
    float: left;
    display: block;
    width: 130px;
    height: 50px;
    padding: 17px 10px 0 0;
    margin: 0 30px 0 0 ;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #6d450f;   
    font-weight: bold;
    outline: none;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul li .current {
    color: #fff;
    background: url('templatemo_menu_hover.png')
}


#templatemo_top_wrapper {
    width: 100%;
    height: 100px;
    background:url('templatemo_menu.jpg') no-repeat top center;
}

#templatemo_top {
    width: 970px;
    height: 100px;
    margin: 0 auto;
    padding: 0 30px 0 80px;
    background: url('templatemo_menu.jpg') no-repeat top center;
}





#templatemo_header_wrapper {
    clear: both;
    width: 100%;
    height: 300px;
    background: url(images/templatemo_header.jpg) no-repeat top center;
}

#templatemo_header {
    width: 920px;
    height: 250px;
    margin: 0 auto;
    padding: 50px 80px 0 80px;
    background: url(images/templatemo_header.jpg) no-repeat top center;
}

#templatemo_header  #site_title {
    float: left;
    width: 500px;
    padding-top: 30px;
    padding-left: 100px;
}

#templatemo_header  #site_title h1 {
    margin: 0;
    padding: 0;
    color: #fff;
}

#templatemo_header  #site_title h1 a {
    margin: 0px;
    padding: 0px;
    font-size: 50px;
    color: #ffef38;
    font-weight: normal;
    text-decoration: none;
}

#templatemo_header  #site_title a span {
    display: block;
    font-size: 16px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 20px;
    margin-left: 5px;
}


#nav
    {
    line-weight:30px;
    background-color:;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
clear:both;
    }

    #section
        {
        width:350px;
        float:left;
        padding:10px;
        }

    #footer{
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:4px;
        }

</style>
</head>




complete code is  save this code as template.html put menu image and HTML file in same folder


<html>
<head>
<style>


    #header{
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
        }
   

   




    #templatemo_menu {
    float: left;
    width: 700px;

    align:center;
}

#templatemo_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

#templatemo_menu ul li a {
    float: left;
    display: block;
    width: 130px;
    height: 50px;
    padding: 17px 10px 0 0;
    margin: 0 30px 0 0 ;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #6d450f;   
    font-weight: bold;
    outline: none;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul li .current {
    color: #fff;
    background: url('templatemo_menu_hover.png')
}


#templatemo_top_wrapper {
    width: 100%;
    height: 100px;
    background:url('templatemo_menu.jpg') no-repeat top center;
}

#templatemo_top {
    width: 970px;
    height: 100px;
    margin: 0 auto;
    padding: 0 30px 0 80px;
    background: url('templatemo_menu.jpg') no-repeat top center;
}





#templatemo_header_wrapper {
    clear: both;
    width: 100%;
    height: 300px;
    background: url(images/templatemo_header.jpg) no-repeat top center;
}

#templatemo_header {
    width: 920px;
    height: 250px;
    margin: 0 auto;
    padding: 50px 80px 0 80px;
    background: url(images/templatemo_header.jpg) no-repeat top center;
}

#templatemo_header  #site_title {
    float: left;
    width: 500px;
    padding-top: 30px;
    padding-left: 100px;
}

#templatemo_header  #site_title h1 {
    margin: 0;
    padding: 0;
    color: #fff;
}

#templatemo_header  #site_title h1 a {
    margin: 0px;
    padding: 0px;
    font-size: 50px;
    color: #ffef38;
    font-weight: normal;
    text-decoration: none;
}

#templatemo_header  #site_title a span {
    display: block;
    font-size: 16px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 20px;
    margin-left: 5px;
}


#nav
    {
    line-weight:30px;
    background-color:;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
clear:both;
    }

    #section
        {
        width:350px;
        float:left;
        padding:10px;
        }


    #footer{
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:4px;
        }


</style>
</head>
<body>
<div id="header">
<h1>Ahmednagar City Gallery</h1>



<div id="templatemo_menu">
                   
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact Us</a></li>
       
            </ul>       
       
        </div> <!-- end of templatemo_menu -->
</div>





<div id="nav">

History<br>
Tourist Spots<br>
Femous places <br>
Tourist Guide<br>
Femous Things <br>

</div>


<div id="section">
<h1>Ahmednagar is very nice city..</h1>

<h1>Ahmednagar is very nice city..</h1>

<h1>Ahmednagar is best city..</h1>
<p>
</p>


</div>

<div id="footer">
<h1>copyright@</h1>
</div>
</body>
</html>                           

 

to download attractive menu tempate click here 

 

Assinement solve by Student

Pallavi Rachcha  MCA II (IMS Ahmednagar)

HTML5 CSS3 Sesson