Jquery is a simplified javascript library. JQuery is being used widely nowadays because of its open-source interface and ease of programming. Jquery provides advanced effects, smooth animations.
The official website for JQuery: http://www.jquery.com
You can download the JQuery library here: http://jquery.com
Including the JQuery library: <script type=”text/javascript” src=”jquery.js”></script>
An example of JQuery: Attractive JQuery Dropdown Menu
HTML Code:
<ul id=”topnav”>
<li><a href=”#”>Link</a></li>
<li>
<a href=”#”>Link</a>
<!–Subnav Starts Here–>
<span>
<a href=”#”>Subnav Link</a> |
<a href=”#”>Subnav Link</a> |
<a href=”#”>Subnav Link</a>
</span>
<!–Subnav Ends Here–>
</li>
<li><a href=”#”>Link</a></li>
</ul>
CSS Styling:
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative; /*–Set relative positioning on the unordered list itself – not on the list item–*/
font-size: 1.2em;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555; /*–Divider for each parent level links–*/
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*–Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav–*/
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none; /*–Hide by default–*/
width: 970px;
background: #1376c9;
color: #fff;
/*–Bottom right rounded corner–*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*–Bottom left rounded corner–*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*–Show subnav on hover–*/
ul#topnav li span a { display: inline; } /*–Since we declared a link style on the parent list link, we will correct it back to its original state–*/
ul#topnav li span a:hover {text-decoration: underline;}
Calling the JQuery: to be included in the head tag
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
Javascript:
<script type=”text/javascript”>
$(document).ready(function() {
$(“ul#topnav li”).hover(function() { //Hover over event on list item
$(this).css({ ‘background’ : ‘#1376c9 url(topnav_active.gif) repeat-x’}); //Add background color and image on hovered list item
$(this).find(“span”).show(); //Show the subnav
} , function() { //on hover out…
$(this).css({ ‘background’ : ‘none’}); //Ditch the background
$(this).find(“span”).hide(); //Hide the subnav
});
});
</script>
I strongly believe that JQuery is a great resource for web designers.
