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 JQuery. Show all posts
Showing posts with label 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)