是否可以使此菜单垂直？

时间：2015-01-09 08:40:59

标签： jquery html css

我在网上找到了一个jQuery Dropdown菜单，但问题是它是水平的，我的项目是使用垂直菜单。这是代码：

HTML code：

＆＃13;
＆＃13; 
    $(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(" » ");

    });
＆＃13; 
* {
  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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

CSS中使用的图像只是管道般的垂直线条，overlay.png图像比overlay2.png长。

那么可以使菜单垂直吗？

4 个答案:

答案 0 :(得分：4)

你需要改变两件事

用下面的

替换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

＆＃13;
＆＃13; 
$(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; ");

});
＆＃13; 
 * {
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用CSS浮动，可以向左或向右推动元素，允许其他元素环绕它。

在CSS中删除FLOAT并插入元素宽度。

将此部分ul.dropdown li {}替换为

ul.dropdown li {
   font-weight: bold;
    /* float: left; */
    width:250px;
    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);
}

您可以阅读 here 。

答案 2 :(得分：1)

删除float:left，然后点击width。您可以将此代码更改为：

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 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);
}

答案 3 :(得分：1)

根据sanoj lawrence的答案，你只需要将这些属性添加到ul .dropdown ul CSS：

    margin-top:-24px;   // to make the dropdown aligned with its li element.
    margin-left:-9px;   // to remove the gap between the dropdown and the li element

Here's a DEMO Fiddle

修改

修复评论中指出的sanoj lawrence指出的子菜单问题：

只需将这些属性添加到子菜单ul.dropdown ul ul的css中：

margin-top:-1px;
margin-left:1px;

this is the new fiddle。

相关问题
最新问题