Home > Article > Web Front-end > jquery implements Slide Out Navigation slide-out menu effect code_jquery

jquery implements Slide Out Navigation slide-out menu effect code_jquery

WBOYOriginal: 2016-05-16 15:40:171049browse

The example in this article describes the jquery implementation of the Slide Out Navigation slide-out menu effect code. Share it with everyone for your reference. The details are as follows:

Here we introduce the navigation effect of Slide Out Navigation implemented by jquery that follows the mouse to slide out. After the mouse is moved, the menu quickly moves out from top to bottom. The new version of jQuery plug-in is quoted. The menu can be used by modifying it, such as changing the background color. Or text size, etc.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-slide-out-nav-menu-style-codes/

The specific code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{ font-family:arial;}
ul#navigation {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 position: fixed;
 right: 10px;
 top: 0;
 width: 721px;
 z-index: 999999;
}
ul#navigation li {
 display: inline;
 float: left;
 width: 103px;
}
ul#navigation li a {
 background-color: #E7F2F9;
 background-position: 50% 10px;
 background-repeat: no-repeat;
 border: 1px solid #BDDCEF;
 border-radius: 0 0 10px 10px;
 display: block;
 float: left;
 height: 25px;
 margin-top: -2px;
 opacity: 0.7;
 padding-top: 80px;
 text-align: center;
 text-decoration: none;
 line-height:25px;
 width: 100px;
 font-size:11px;
 color: #60ACD8;
 letter-spacing: 2px;
 text-shadow: 0 -1px 1px #FFFFFF;
}
ul#navigation li a:hover {
 background-color: #CAE3F2;
}
ul#navigation .home a {
 background: url(images/home.png) no-repeat;
}
ul#navigation .about a {
 background: url(images/id_card.png) no-repeat;
}
ul#navigation .search a {
 background: url(images/search.png) no-repeat;
}
ul#navigation .podcasts a {
 background: url(images/ipod.png) no-repeat;
}
ul#navigation .rssfeed a {
 background: url(images/rss.png) no-repeat;
}
ul#navigation .photos a {
 background: url(images/camera.png) no-repeat;
}
ul#navigation .contact a {
 background: url(images/mail.png) no-repeat;
}
</style>
</head>
<body>
<ul id="navigation">
 <li class="home"><a href="">Home</a></li>
 <li class="about"><a href="">About</a></li>
 <li class="search"><a href="">Search</a></li>
 <li class="photos"><a href="">Photos</a></li>
 <li class="rssfeed"><a href="">Rss Feed</a></li>
 <li class="podcasts"><a href="">Podcasts</a></li>
 <li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
 var d=300;
 $('#navigation a').each(function(){
 $(this).stop().animate({
 'marginTop':'-80px'
 },d+=150);
 });
 $('#navigation > li').hover(
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-2px'
 },200);
 },
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-80px'
 },200);
 }
 );
 });
</script>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery full screen focus image left and right scrolling special effect code sharing_jqueryNext article：jQuery full screen focus image left and right scrolling special effect code sharing_jquery

See more

jquery implements Slide Out Navigation slide-out menu effect code_jquery

Related articles