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

JQuery

JQuery

Content
* Introduction to Jquery
* jquery Syntax
* Document ready event
* Jquery Events
* Jquery Effects
* Handling css through jquery


Introduction to jquery

* JQuery is a JavaScript library. 
* It is a library of JavaScript functions. 
* jQuery is a fast, small, and feature-rich JavaScript library
* It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
* The jQuery library is stored as a single JavaScript file, containing all the jQuery methods. 
* You need to download jquery.js first.

<head>
 <script type="text/javascript" src="jquery.js">   </script>
</head> 

Jquery Syntax

* The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

$(selector).action()

* $ sign defines JQuery. 
* Selector is HTML element. 
* Action is a function to be performed.
* jQuery selectors allow you to select HTML elements (or groups of elements) by tag name, class name or by Id.

Example

$(this).hide()      //Hides the current element
$("img").hide() //Hide all images
$(".i").hide()      //Hide all html elements with class attribute value is 'i'.
$("#i1").hide() //Hide an html element whose id attribute is i1.

Document ready event

* All JQuery code written inside ready() method, this is to prevent any JQuery code from running before the document is finished loading. 

$(document).ready(function(){
//JQuery code here
}); 

Jquery Events

* All the different visitor actions that a web page can respond to are called events.
* An event represents the precise moment when something happens
* For example - moving a mouse over an element, selecting a radio button, selecting an element, clicking a button, etc
* Some of the jquery methods representing events are:
 - click  
 - dblclick
 - mouseenter
 - mouseleave
 - hover
 - mousemove
 - keypress
 - keydown
 - keyup
 - submit
 - change
 - focus
 - blur
 - load
 - resize
 - scroll
 - unload
* To assign a click event to a particular button on a page, you can do this
 - $("#button1").click();
* The next step is to define what should happen when the event fires
 - $("#button1").click(function(){
//your action code here
});


Jquery Effects

* There are several jquery methods that can be used to represent effects or actions.
 - animate
 - delay
 - fadeIn
 - fadeout
 - fadeTo
 - hide
 - show
 - slideDown
 - slideUp
 - toggle

Example

<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Example

<html>
<head>
 <script type="text/javascript" src="jquery.js">
 </script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(1000);
    if($(this).html()=="Hide")
        $(this).html("Show");
    else
        $(this).html("Hide");  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

Handling CSS through Jquery

* Just like javascript, we can manipulate css through jquery. 
* We use css() method, with two string arguments. First argument is property name and second argument is property value. 

Example: Change background when mouse move over a paragraph

<html>
<head>
 <script type="text/javascript" src="jquery.js">
 </script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").hover(function(){
     $("this").css("background-color", "lightblue");
    }, function(){
     $("this").css("background-color", "white");
});
</script>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
</body>
</html>

<<Prev     Home     Next>>