文章/答案/技术大牛

发布

社区首页 >问答首页 >需要所有子菜单位于第一个nav选项下；最后一个子菜单选项具有不同的宽度。

问需要所有子菜单位于第一个nav选项下；最后一个子菜单选项具有不同的宽度。
EN

Stack Overflow用户

提问于 2015-08-07 13:56:06

回答 1查看 92关注 0票数 0

因此，这里有两个问题：

first :因此我想要创建一个导航结构，其中first ul树是一个普通的水平导航条，而第二ul树是位于first ul树的第一个选项下面的单个垂直导航条(实际上，子菜单的所有部分都将驻留在同一个位置，替换以前的子菜单ul，而另一个子菜单被激活)。

在这里，我已经让它在基本级别上工作了，不过我认为必须有比手动调整右元素的方法更好的方法，特别是因为我需要在多个屏幕大小上匹配(例如，包括使用jQuery Mobile的iPad屏幕大小)。

第二：所有子菜单中的最终li (出于任何原因，最后一个子菜单除外)的宽度都比li的的其他子菜单的宽度要长。

HTML:

<!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 name="viewport" content="width=device-width,initial-scale=1">

    <!--Normal CSS Stylsheets-->
    <link rel="stylesheet" type="text/css" href="includes/css/style.css">

    <!--jQuery Mobile Stylesheets-->
    <link rel="stylesheet" type="text/css" href="includes/jQueryMobile/jquery.mobile-1.4.5.min.css">

    <!--FooTable CSS-->
    <link rel="stylesheet" type="text/css" href="includes/FooTable-2/css/footable.core.css">
    <link rel="stylesheet" type="text/css" href="includes/FooTable-2/css/footable.metro.css">

    <!--jQuery Library-->
    <script src="includes/jQuery/jquery-1.11.3.min.js"></script>

    <!--jQuery Mobile Library-->
    <script src="includes/jQueryMobile/jquery.mobile-1.4.5.min.js"></script>

    <!--Footable jQuery-->
    <script src="includes/FooTable-2/js/footable.js"></script>
    <script src="includes/FooTable-2/js/footable.sort.js"></script>
    <script src="includes/FooTable-2/js/footable.filter.js"></script>
    <script src="includes/FooTable-2/js/footable.paginate.js"></script>

    <!--General Javascript-->
    <script src="includes/js/general.js"></script>

</head>
<body>   
    <div data-role="page" data-theme="a" id="home">


        <div data-role="header" data-position="fixed">
<nav id="navbar" data-role="navbar">
    <ul>
        <li><a href="#">Real-Time</a>
            <ul>
                <li><a href="#">Choice 1</a></li>
                <li><a href="#">Choice 2</a></li>
                <li class="lastFirstNav"><a href="#">Choice 3</a></li>
            </ul>
        </li>
        <li><a href="#" class="pageChange">Database Functions</a>
            <ul class="secondNav">
                <li><a href="#">Another Choice 1</a></li>
                <li><a href="#">Another Choice 2</a></li>
            </ul>
        </li>
        <li><a href="#" class="pageChange">Settings/Configuration</a>
            <ul class="thirdNav">
                <li><a href="login.php">Logout</a></li>
                <li><a href="#">A Third Choice 2</a></li>
                <li><a href="#">A Third Choice 3</a></li>
                <li><a href="#">A Third Choice 4</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>


        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed">
            <h1>
                Home
            </h1>
        </div>

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

CSS:

#navbar ul ul {
    display: none;
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}

#navbar ul ul li {
    float: left;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    width: 100%;
    height: 100%;
}

#navbar ul ul.secondNav li 
{
    right: 100%;
}


#navbar ul ul.thirdNav li
{
    right: 200.5%;
}

    #navbar ul ul li a.active {
        background: #4b545f;
    }

#navbar ul ul ul {
    position: absolute; 
    left: 100%; 
    top: 0;
}

#navbar ul li.active > ul { 
        display: block;
    }

#navbar ul li { 
    float: left;
}

#navbar ul li.active {

    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

#navbar ul li a {
    display:block; 
    padding: 25px 40px; 
    text-decoration: none;
}

谢谢。

更新: JSFiddle：https://jsfiddle.net/LLx7vgjo/3/

html

css

jquery-mobile

nav

submenu

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-07 14:42:06

如果您希望所有的子菜单都在左边排列，那么将它们相对于主顶部ul而不是子li定位。

#navbar > ul {
    position: relative;
}

 #navbar ul ul {
    display: none;
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto; 
}

至于宽度，子菜单的宽度将仅限于它们需要的宽度(width:auto)，以包含它们的各种li和链接。

这将是不同的每个子菜单，因为这些链接的内容将随着内容的变化。

如果要保持一致性，请在子菜单ul上定义宽度。

JSFiddle Demo

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31879493

复制

相似问题

问需要所有子菜单位于第一个nav选项下；最后一个子菜单选项具有不同的宽度。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要所有子菜单位于第一个nav选项下；最后一个子菜单选项具有不同的宽度。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要所有子菜单位于第一个nav选项下；最后一个子菜单选项具有不同的宽度。
EN