当前位置 : 主页 > 网页制作 > JQuery >

jquery – 是否可以使此菜单垂直？

来源：互联网 收集：自由互联 发布时间：2021-06-15
我在网上找到了一个jQuery Dropdown菜单,但问题是它是水平的,我的项目是使用垂直菜单.这是代码： HTML代码： $(function() { $("ul.dropdown li").hover(function() { $(this).addClass("hover"); $('ul:first', this
我在网上找到了一个jQuery Dropdown菜单,但问题是它是水平的,我的项目是使用垂直菜单.这是代码：

HTML代码：

$(function() {

      $("ul.dropdown li").hover(function() {

        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');

      }, function() {

        $(this).removeClass("hover");
        $('ul:first', this).css('visibility', 'hidden');

      });

      $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    });
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  background-color: #303030;
}
#page-wrap {
  width: 800px;
  margin: 25px auto;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
p {
  margin: 15px 0;
}
/*
     LEVEL ONE
     */

ul.dropdown {
  position: relative;
}
ul.dropdown li {
  font-weight: bold;
  float: left;
  zoom: 1;
  background: #000 url(../img/overlay2.png) repeat-x top left;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 1px;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
ul.dropdown a:hover {
  color: #000;
}
ul.dropdown a:active {
  color: #ffa500;
}
ul.dropdown li a {
  display: block;
  padding: 4px 8px;
  color: #fff;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
ul.dropdown li:last-child a {
  border-right: none;
}
/* Doesn't work in IE */

ul.dropdown li.hover,
ul.dropdown li:hover {
  background: #0070C0;
  color: black;
  position: relative;
  color: #fff;
}
ul.dropdown li.hover a {
  color: #fff;
  font-weight: bold;
}
/*
     LEVEL TWO
     */

ul.dropdown ul {
  width: 220px;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}
ul.dropdown ul li {
  font-weight: normal;
  background: #909090 url(../img/overlay2.png) repeat-x top left;
  color: #000;
  float: none;
}
/* IE 6 & 7 Needs Inline Block */

ul.dropdown ul li a {
  border-right: none;
  width: 100%;
  display: inline-block;
}
/*
     LEVEL THREE
     */

ul.dropdown ul ul {
  left: 100%;
  top: 0;
}
ul.dropdown li:hover > ul {
  visibility: visible;
}
<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simply Styled jQuery Dropdown</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>

<body>
  <div id="page-wrap">
    <ul class="dropdown">
      <li><a href="#">For Facilities</a>
        <ul class="sub_menu">
          <li><a href="#">Artificial Turf</a>
          </li>
          <li>
            <a href="#">Batting Cages</a>
            <ul>
              <li><a href="#">Indoor</a>
              </li>
              <li><a href="#">Outdoor</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Benches &amp; Bleachers</a>
          </li>
          <li><a href="#">Communication Devices</a>
          </li>
          <li><a href="#">Dugouts</a>
          </li>
          <li><a href="#">Fencing &amp; Windscreen</a>
          </li>
          <li><a href="#">Floor Protectors</a>
          </li>
          <li><a href="#">Foul Poles</a>
          </li>
          <li><a href="#">Netting</a>
          </li>
          <li><a href="#">Outdoor Furniture</a>
          </li>
          <li><a href="#">Outdoor Signs</a>
          </li>
          <li><a href="#">Padding</a>
          </li>
          <li><a href="#">Scoreboards</a>
          </li>
          <li><a href="#">Shade Structures</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
      <li><a href="#">Training &amp; Conditioning</a>
        <ul class="sub_menu">
          <li><a href="#">Ladders &amp; Sticks</a>
          </li>
          <li><a href="#">Hurdles</a>
          </li>
          <li><a href="#">Training Accessories</a>
          </li>
          <li><a href="#">Smart-Cart Training System</a>
          </li>
          <li><a href="#">Smart-Hurdle Collection</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
      <li><a href="#">Books-Videos</a>
        <ul class="sub_menu">
          <li><a href="#">Field Design</a>
          </li>
          <li><a href="#">Turf Management</a>
          </li>
          <li><a href="#">Training</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>

CSS中使用的图像只是像管道一样的垂直线,overlay.png图像比overlay2.png长.

那么可以使菜单垂直吗？

你需要改变两件事

用波纹管替换ul.dropdown li

ul.dropdown li {
font-weight: bold;
width: 200px;
zoom: 1;
background: #000 url(../img/overlay2.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

用波纹管替换ul.dropdown ul

ul.dropdown ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:210px;
}

吼叫是DEMO

$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    background-color:#303030;
} 
#page-wrap {
    width: 800px;
    margin: 25px auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

p {
    margin: 15px 0;
}

/*
 LEVEL ONE
 */
ul.dropdown {
    position: relative;
}

ul.dropdown li {
font-weight: bold;
width: 200px;
zoom: 1;
background: #000 url(../img/overlay2.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown a:hover {
    color: #000;
}

ul.dropdown a:active {
    color: #ffa500;
}

ul.dropdown li a {
    display: block;
    padding: 4px 8px;
    color: #fff;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown li:last-child a {
    border-right: none;
}
 /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
    background: #0070C0;
    color: black;
    position: relative;
    color:#fff;
}

ul.dropdown li.hover a {
    color: #fff;
    font-weight:bold;
}

/*
 LEVEL TWO
 */
ul.dropdown ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:210px;
}

ul.dropdown ul li {
    font-weight: normal;
    background: #909090 url(../img/overlay2.png) repeat-x top left;
    color: #000;
    float: none;
}

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
    border-right: none;
    width: 100%;
    display: inline-block;
}

/*
 LEVEL THREE
 */
ul.dropdown ul ul {
    left: 100%;
    top: 0;
}

ul.dropdown li:hover > ul {
    visibility: visible;
}
<div id="page-wrap">           
        <ul class="dropdown">
            <li><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Artificial Turf</a></li>
                     <li>
                        <a href="#">Batting Cages</a>
                        <ul>
                            <li><a href="#">Indoor</a></li>
                            <li><a href="#">Outdoor</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Benches &amp; Bleachers</a></li>
                     <li><a href="#">Communication Devices</a></li>
                     <li><a href="#">Dugouts</a></li>
                     <li><a href="#">Fencing &amp; Windscreen</a></li>
                     <li><a href="#">Floor Protectors</a></li>
                     <li><a href="#">Foul Poles</a></li>
                     <li><a href="#">Netting</a></li>
                     <li><a href="#">Outdoor Furniture</a></li>
                     <li><a href="#">Outdoor Signs</a></li>
                     <li><a href="#">Padding</a></li>
                     <li><a href="#">Scoreboards</a></li>
                     <li><a href="#">Shade Structures</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
            <li><a href="#">Training &amp; Conditioning</a>
                <ul class="sub_menu">
                     <li><a href="#">Ladders &amp; Sticks</a></li>
                     <li><a href="#">Hurdles</a></li>
                     <li><a href="#">Training Accessories</a></li>
                     <li><a href="#">Smart-Cart Training System</a></li>
                     <li><a href="#">Smart-Hurdle Collection</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
            <li><a href="#">Books-Videos</a>
                <ul class="sub_menu">
                     <li><a href="#">Field Design</a></li>
                     <li><a href="#">Turf Management</a></li>
                     <li><a href="#">Training</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
        </ul>       
    </div>
上一篇：jquery – 调用$.getJSON的正确方法？
下一篇：jQuery / JavaScript函数范围/提升
网友评论
相关栏目
最近更新
热门文章