Ankit B Desai: Menu Designing

Menu Designing

Content
* Menu
* Sample Menu Designing Example

Menu

* Menu in any web application facilitate easy navigation to the user
* Content of your web application is categorized and displayed in different pages. To access these pages you design menu as links to web pages.
* Menu can be designed in many ways, in fact it is a matter of designing and innovation.
* Fancy menu may use HTML, CSS and javascript.
* Go through the following examples and understand the basics. 
 
Sample Menu Designing Example

Example 1

menu.html

<html>
 <head>
  <link rel="stylesheet" href="menu.css"/>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    $("ul li").hover(
     function(){
         $("ul",this).css("display","block");
         $("a",this).css("color","red");
   $("a",this).css("background-color","lightblue");
  $("ul li a",this).css("background-color","white");
         $("ul li a",this).css("color","#777");
              },
     function(){
       $("ul",this).css("display","none");
       $("a",this).css("color","#777");
       $("a",this).css("background-color","white");
    });
   });
  </script>
 </head>
 <body>
  <ul id="ul1"> 
    <li class="li1"><a class="a1" href="#">Home</a></li> 
    <li class="li1"><a class="a1" href="#">Courses</a> 
      <ul> 
        <li><a class="a2" href="#">C/C++</a></li> 
        <li><a class="a2" href="#">PHP</a></li> 
        <li><a class="a2" href="#">Java</a></li> 
      </ul> 
    </li> 
    <li class="li1"><a class="a1" href="#">Services</a> 
      <ul> 
        <li><a class="a2" href="#">Web Design</a></li> 
        <li><a class="a2" href="#">Internet Marketing</a></li> 
        <li><a class="a2" href="#">Hosting</a></li> 
        <li><a class="a2" href="#">Domain Names</a></li> 
        <li><a class="a2" href="#">Broadband</a></li> 
      </ul> 
    </li>
    <li class="li1"><a class="a1" href="#">Contact Us</a> 
      <ul> 
        <li><a class="a2" href="#">Bhopal</a></li> 
        <li><a class="a2" href="#">Indore</a></li> 
        <li><a class="a2" href="#">Bangalore</a></li> 
        <li><a class="a2" href="#">Hydrabad</a></li> 
      </ul> 
    </li> 
  </ul>
 </body>
</html>

menu.css

body
{
        background-color:lightgray;
}
#ul1,ul 
{
  position:relative;
 list-style: none;
}
#ul1 .li1
{
        display:table-cell;
        width:150px;
}
li ul li
{
 position:relative;
 left:-40;
}
ul li ul
{
 position:absolute; 
 display:none;
 border:2px solid black;
 background-color:white;
 width:110px;
}
.a1
{
 background-color: #fff;
 border: 1px solid #ccc;
}
.a2
{
 width:140;
}
ul li a 
{
 display:block;
 text-decoration: none;
 color: #777;
 padding: 5px;
 border-bottom: 0;
        margin:0;
}

Example 2

menu.html

<html>
 <head>
  <link rel="stylesheet" href="menu.css"/>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    $("#ul1 li").hover(
     function(){
         $("ul",this).css("display","block");
         $("a",this).css("color","red");
   $("a",this).css("background-color","lightblue");
  $("ul li a",this).css("background-color","white");
         $("ul li a",this).css("color","#777");
              },
     function(){
       $("ul",this).css("display","none");
       $("a",this).css("color","#777");
       $("a",this).css("background-color","white");
    });
   });
  </script>
 </head>
 <body>
  <ul id="ul1"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Courses</a> 
      <ul> 
        <li><a href="#">C/C++</a></li> 
        <li><a href="#">PHP</a></li> 
        <li><a href="#">Java</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">Bhopal</a></li> 
        <li><a href="#">Indore</a></li> 
        <li><a href="#">Bangalore</a></li> 
        <li><a href="#">Hydrabad</a></li> 
      </ul> 
    </li> 
  </ul>
 </body>
</html>

menu.css

body
{
        background-color:lightgray;
}
ul 
{
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
}
ul li 
{
 position: relative;
}
li ul 
{
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
}
ul li a 
{
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
}





<<Prev     Home     Next>>
Ankit B Desai

Pages

Thursday, July 6, 2017

Menu Designing

No comments:

Post a Comment
