Total Pageviews

Wednesday, March 4, 2015

HTML css Rectangle menu with vertical separator










HTML css  Rectangle menu with vertical separator

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 .








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

<body>
 
 
 
   <div id="header">
     <h1> Top 3 Actors </h1>
 
    <div id="templatemo_menu">
        <ul>
            <li><a href="index.html"  class="current">Home</a></li>
            <li><a href="#">Daily News</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Business</a></li>
            <li><a href="#">Politics</a></li>
            <li><a href="#">Entertainment</a></li>                   
            <li><a href="#">Technology &amp; Science</a></li>          
        </ul>
    </div>

</div>
   <div id="nav">
     <h5> <a href="1.html"> Salman Khan </a> </h5>
     <h5> <a href="2.html"> Shahrukh Khan </a> </h5>
     <h5> <a href="3.html">Aamir Khan </a> </h5>
   </div>



   <div id="section">

     <p>
     </p>
    </div>


  <div id="footer">
   <h1> copyright@w3schools </h1>
  </div>

 </body>



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

<head>
<style>
 #header{ background-color:pink;
          color:red;
          text-align:center;
          padding:5px;
}
#templatemo_menu {
    float: left;
    width: 100%;
    height: 30px;
    background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
    border-bottom: 1px solid #333;
}

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

#templatemo_menu ul li{
    display: inline;
}

#templatemo_menu ul li a{
    float: left;
    padding: 0 25px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
    color: #FFFF00;
}

#nav{ line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      h5:hover,h5:active;
clear:both;
    }
#section{ width:350px;
          float:left;
          padding:10px;
        }
#footer{ background-color:pink;
         color:red;
         clear:both;
         text-align:center;
         padding:5px;
       }
</head>







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

  <html>
<head>
<style>
 #header{ background-color:pink;
          color:red;
          text-align:center;
          padding:5px;
}
#templatemo_menu {
    float: left;
    width: 100%;
    height: 30px;
    background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
    border-bottom: 1px solid #333;
}

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

#templatemo_menu ul li{
    display: inline;
}

#templatemo_menu ul li a{
    float: left;
    padding: 0 25px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
    color: #FFFF00;
}

#nav{ line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      h5:hover,h5:active;
clear:both;
    }
#section{ width:350px;
          float:left;
          padding:10px;
        }
#footer{ background-color:pink;
         color:red;
         clear:both;
         text-align:center;
         padding:5px;
       }
</head>
</style>
 <body>
 
 
 
   <div id="header">
     <h1> Top 3 Actors </h1>
 
    <div id="templatemo_menu">
        <ul>
            <li><a href="index.html"  class="current">Home</a></li>
            <li><a href="#">Daily News</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Business</a></li>
            <li><a href="#">Politics</a></li>
            <li><a href="#">Entertainment</a></li>                   
            <li><a href="#">Technology &amp; Science</a></li>          
        </ul>
    </div>

</div>
   <div id="nav">
     <h5> <a href="1.html"> Salman Khan </a> </h5>
     <h5> <a href="2.html"> Shahrukh Khan </a> </h5>
     <h5> <a href="3.html">Aamir Khan </a> </h5>
   </div>



   <div id="section">

     <p>
     </p>
    </div>


  <div id="footer">
   <h1> copyright@w3schools </h1>
  </div>

 </body>
 </html>

 

 to download html5 css3 rectangle menu template click here

Assinement solve by Student

Ribana Shaikh  MCA II (IMS Ahmednagar)

HTML5 CSS3 Session

 

 

    

Popular Posts

Follow by Email