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>>
Showing posts with label Introduction to Jquery. Show all posts
Showing posts with label Introduction to Jquery. Show all posts
Thursday, July 6, 2017
Menu Designing
Wednesday, July 5, 2017
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>>
Subscribe to:
Posts (Atom)