search

Home  >  Article  >  Web Front-end  >  jquery implements the red vertical multi-level navigation menu effect that expands to the right_jquery

jquery implements the red vertical multi-level navigation menu effect that expands to the right_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:331415browse

The example in this article describes the jquery implementation of a red vertical multi-level navigation menu effect that expands to the right. Share it with everyone for your reference. The details are as follows:

What is introduced here is a red vertical multi-level navigation menu that expands to the right. It is mostly used for navigation menus on blog websites. It is a red style, very beautiful, menu that expands to the right.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/

The specific code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>红色竖向多级向右展开的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{float:left;position:relative;width:253px;}
h2,ul,p{margin:0;padding:0;text-align:center;}
h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;}
h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;}
ul{font-size:0;background:#9B203F;padding:0 0 40px;}
ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;}
ul li a{border-bottom:dashed 1px #E67A92;display:block;width:196px;margin:0 auto;}
ul li.hover_bg{background:#C30431;}
.Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;}
.Secon_Dary p{padding:0 20px;}
.Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;}
a{cursor:pointer;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".nav ul li").hover(function(){
  $(this).addClass("hover_bg");
  $(this).children("div").show();
 },function(){
  $(this).removeClass("hover_bg");
  $(this).children("div").hide();
 })
})
</script>
</head>
<body>
<div class="nav">
 <h2><a>ALL CATEGORIES</a></h2>
 <ul>
  <li>
   <a>Posojg</a>
   <div class="Secon_Dary">
    <p>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
    </p>
   </div>
  </li>
  <li>
   <a>FOwojg</a>
   <div class="Secon_Dary">
    <p>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
    </p>
   </div>  
  </li>
  <li>
   <a>Sowgjed</a>
   <div class="Secon_Dary">
    <p>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
    </p>
   </div>
  </li>
  <li>
   <a>Gowjgeo</a>
   <div class="Secon_Dary">
    <p>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
     <a>AAAAAAAAAAA</a>
     <a>BBBBBB</a>
    </p>
   </div>
  </li>
 </ul>
</div>
</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 implements simple list navigation menu effect code_jqueryNext article：jQuery implements simple list navigation menu effect code_jquery

Related articles

See more