带有子菜单的水平导航菜单

问题描述 投票：-3回答：2

我有这个导航菜单：

http://jsfiddle.net/laziale/T45tD/4/

我想知道如何解决该菜单，使导航菜单可通过子菜单扩展。我输入了一些示例数据。

这里是源代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
    <link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>  
</head>
<body>
    <form id="form1" runat="server">
        <div class="pagetop">
            <div class="head pagesize">
            <div class="head_top">
                <div class="topbuts">
                    <ul class="clear">                    
                    </ul>
                  </div>
                <div class="user clear">
                        <span class="user-detail">                  
                    </span>

                </div>
                <div class="logo clear">
                <a href="#" title="Home">
                    <img src="Images/logo.jpg" class="picture" />
                    <span class="textlogo">                     
                    </span>
                </a>
                    </div>
              </div>
                <div class="menu">
                    <ul class="clear">
                        <li class="active"><a href="#">Client</a>
                            <ul>
                                <li class="subNav"><a href="#">Client Summary</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Agent</a>
                         <ul>
                                <li class="subNav"><a href="#">Agent Summary</a>
                              <ul>
                                <li class="subNav"><a href="#">Link1y</a></li>
                                <li class="subNav"><a href="#">Link2</a></li>
                            </ul></li>
                            </ul>
                      </li>
                        <li><a href="#">System Utility</a>
                         <ul>
                                <li class="subNav"><a href="#">Link1</a>
                                  <li class="subNav"><a href="#">Link2</a>
                                    <li class="subNav"><a href="#">Link3</a>
                           </ul>
                      </li>
                        <li><a href="#">Report</a></li>
                        <li><a href="#">Maintenance</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>

            </div>
        </div>
    <div>       
    </div>
    </form>
</body>
</html>

和CSS：

body {
    min-width:1000px;
    text-align:center;
    margin:0px;
    font-family:Arial;
    font-size:12px;
    color:#666666;
    background:#8D8D8D;
}

.pagetop {
    width:100%;
    min-width:1000px;
    background-color: #333333;
    border-bottom: 4px solid #007FAA;
    position:relative;
    z-index:100;
    min-height:149px;
}

.head_top {
    position:relative;
    min-height:114px;
}

.topbuts {
    position:absolute;
    top:0px;
    right:0px;
}

.topbuts ul {
    float:right;
    }

.topbuts li {
    float:left;
    margin-left:2px;
    font-size:11px;
    font-weight: bold;
    }

.topbuts li a {
        background:#007FAA;
        text-decoration:none;
        display:block;
        color:#FFFFFF;
        line-height:16px;
        padding:1px 12px 2px 12px;
    }

ol ul {
list-style:none;
}

.head {
    padding:0px;
}
.pagesize {
    width:1000px;
    margin: 0px auto;
    text-align:left;
}

.user {
    clear:both;
    float:right;
    padding-top:27px;
}

.user-detail {
    display: block;
    float:right;
    text-align:right;
}

    .user-detail .name {
        display: block;
        line-height:normal;
        text-align:left;
        float:right;
        font-size:18px;color:#FFFFFF;
        padding:2px 0px 7px 0px;
    }

    .user-detail .text {
        color: #bbbbbb;
        clear:both;
        font-size:11px;
        line-height:18px;
        color:#FFFFFF;
        display:block;
    }

.logo {
    padding-top:20px;
}

    .logo a {
        text-decoration:none;
    }
    .logo .picture {
        float:left;
        margin-right:10px;
    }

    .logo .textlogo {
        float:left;
    }
    .logo .title {
        display:block;
        font-family:Arial;
        font-size:20px;
        color:#FFFFFF;
        font-weight: bold;
        margin-top:5px;
        letter-spacing: -0.02em;
    }
    .logo .text {
        display:block;
        font-weight: bold;
        color: #BBBBBB;
        position:relative;
        top: -2px;
    }
.menu ul {
    font-size:13px;
}

.menu li {
    float:left;
    margin-right:3px;
    padding-bottom:5px;
    position:relative;
}

    .menu li .active a {
        background: #FFFFFF;
        color: #333333;
        text-shadow: 1px 1px 1px #BBBBBB;
    }

    .menu li a {
        display:block;
        line-height:16px;
        padding: 7px 15px 7px 5px;       
        color: #FFFFFF;
        text-decoration:none;
        font-weight:bold;
        text-shadow: 1px 1px 1px #333333;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
        background:url('..images/button_glas1.png') center center repeat-x #555555;
    }

a {
    color: #006577;
    text-decoration:none;
}
html css jquery-ui nav
2个回答
1
投票

您可以使用superfish jQuery插件。

Here是一个演示

0
投票

要么可以使用javascript并隐藏所有不需要的元素，直到将鼠标悬停在正确的菜单元素上，要么使用CSS来完成，例如：

#navmenu .submenu{
    display:none; /* dosen't show sub menus */
    overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
    display:block; /* display elements */
}

有效的HTML代码示例：
<div id="navmenu">
<ul>
  <li><a href="index.html" class="nav">Réalisations</a>
    <ul class="submenu">
      <li><a href="fr/realisation_web.html" class="nav">Web</a></li>
      <li><a href="fr/realisation_tshirt.html" class="nav">T-shirt</a></li>
      <li><a href="fr/prestations.html" class="nav">Autres prestations</a></li>
    </ul>
  </li>
  <li> <a href="fr/galeries.html" class="nav">Galeries</a>
    <ul class="submenu gallery">
      <li><a href="fr/boston.html" class="nav">Boston</a></li>
      <li><a href="fr/brig.html" class="nav">Brig</a></li>
      <li><a href="fr/fleurs.html" class="nav">Fleurs</a></li>
      <li><a href="fr/grece.html" class="nav">Grèce</a></li>
      <li><a href="fr/nocturnes.html" class="nav">Nocturne</a></li>
      <li><a href="fr/noir_blanc.html" class="nav">Noir&amp;blanc</a></li>
      <li><a href="fr/paris.html" class="nav">Paris</a></li>
      <li><a href="fr/portrait.html" class="nav">Portrait</a></li>
      <li><a href="fr/perspectives.html" class="nav">Perspective</a></li>
    </ul>
  </li>
  <li><a href="fr/news.html" class="nav">News</a></li>
  <li><a href="php/contact.php" class="nav">Contact</a></li>
</ul>

[网络上有许多示例教程；）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.