Question

我正在寻找一种方法，使下拉菜单项的水平导航行转换为垂直堆叠的导航，在输入较小的断点时，该导航将像手风琴一样起作用/起作用。

我不希望将此菜单组转换为汉堡菜单，而是更喜欢将其简单地堆叠成具有折叠功能的折叠式分支在较小的断点上（宽度为它的容器。

我搜索了许多网站/视频，由于某些原因，我很难完成这项工作（再次，主要是由于我缺乏自助知识）。

如果这应该由css中的媒体查询处理，或者可能是javascript函数或某种组合，我感到很困惑？另外，我应该使用除Bootstrap＆＃34;丸＆＃34;之外的其他导航方法来设置它。导航风格？

AGGGGHHH（在这里插入脑爆炸声）！：）

我已经在下方添加了我正在使用的HTML代码。如果有人有建议或者能指出我正确的方向，我会很感激！

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nav-Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>


<body>


<section class= "container" id="mast-container">
        <div class="row">
    <div class="col-lg-8 navbar-collapse collapse">
                <ul class="nav nav-pills" id="main-nav" role="navigation">
                    <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle-main" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 1<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 1 -->

            <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 2<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 2 -->


            <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 3<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 3 -->



            <li role="presentation" class="dropdown"><!--RESEARCH main-nav -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 4<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 4 -->

                    <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 5<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 5 -->
        </ul>
            </div><!--/main-nav-->
        </div><!--/row-->
    </section>




<!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

你对Bootstrap的依恋程度如何？您对导航的偏好表明，Foundation可能是CSS框架http://foundation.zurb.com/的更好的自然选择。修复CSS框架首选导航否定了这一点。

基金会通过构建两组导航标记来接近垂直导航，第一组在页面内容旁边漂浮视图，第二组标记是传统的水平导航。

起初这种方法对我来说似乎很尴尬，但它释放出每个元素都是自己的东西，这可能是一个很好的权衡。祝你好运。

从水平到垂直导航的Bootstrap

1 个答案: