文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在垂直导航栏中创建subnav

问如何在垂直导航栏中创建subnav
EN

Stack Overflow用户
提问于 2019-05-30 13:34:54
回答 1查看 597关注 0票数 1

我正尝试在我的垂直栏中创建一个子导航。这里有一个简短的解释：

​

​

我已经尝试使用我的即将用于课程的语法，但链接不会激活。

我的引导：

代码语言：javascript
复制
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

我的CSS代码：

代码语言：javascript
复制
   .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }

我的HTML代码：

代码语言：javascript
复制
         <div class="menu-overlay "></div>
            <div id="main-menu" class="side-menu-wrapper">
               <a href="#" class="menu-close">×</a>
                  <ul>
                     <li>
                        <form class="example" action="action_page.php">
                        <input type="text" placeholder="Search.." 
                         name="search">
                           <button type="submit">
                              <i class="fa fa-search"></i>
                          </button>
                         </form>
                     </li>
                     <li>
                        <a href="#" target="_blank" rel="nofollow">
                           Home
                        </a>
                     </li>
                     <li>
                <a href="#sub-menu" class="active" data- 
                 toggle="collapse" data-parent="#main-menu">
                    About
                    <span class="ml-2" style="font-size: 12px;">
                        &#x25BC;
                    </span>
                </a>
                <div class="collapse" id="sub-menu">
                  <ul>
                    <li class = "item" href="#" target="_blank" 
                    rel="nofollow">
                      <a >Introduction</a>
                    </li>
                    <li class = "item" href="#" target="_blank" 
                    rel="nofollow"> 
                      <a >Mission</a>
                    </li>
                    <li class = "item" href="#" target="_blank" 
                     rel="nofollow"> 
                       <a >Vision</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <a href="#sub-menu1" class="active" data- 
                toggle="collapse" data-parent="#main-menu">
                    Courses
                    <span class="ml-2" style="font-size: 12px;">
                        &#x25BC;
                    </span>
                 </a>
                <div class="collapse" id="sub-menu1">
                    <ul>
                        <li href="#sub-menu1.1" class="active-item" 
                         data-toggle="collapse" data-parent="#main- 
                          menu">
                            <a>
                              Diploma in Information Technology
                            </a>
                            <ul class="collapse" id="sub-menu1.1">
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                  <a>
                                    Prof.Diploma in IT Support(Hardware)
                                  </a>
                                </li>
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                    <a>Prof.Diploma in Software 
                                       Engineering (Programming)
                                     </a>
                                </li>
                                <li class = "item" href="#" 
                                 target="_blank" rel="nofollow">
                                    <a>
                                      Diploma in Videogame Programming
                                    </a>
                                </li>
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                    <a>
                                      View All
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>               
                </div>
              </li>
              <li>
                <a href="#" target="_blank" rel="nofollow">Flickr</a>
              </li>
            </ul>
          </div>

如你所见，我正在尝试为我的课程链接创建一个子导航，但我不知道。请检查我的HTML代码，确保我一切正常。

css
bootstrap-4
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-30 14:13:06

使用data-target来定位你想要折叠的菜单，而不是data-parent，我已经将子菜单1重命名为子菜单2，这样就可以清楚地区分它们。

有关折叠组件如何工作的更多信息，请访问click here。

下面是工作代码片段：

​

代码语言：javascript
复制
 .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }
代码语言：javascript
复制
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


  <div class="side-menu-wrapper">
  <a href="#" class="menu-close">×</a>
    <ul>
    <li>
      <form class="example" action="action_page.php">
        <input type="text" placeholder="Search.." 
               name="search">
        <button type="submit">
          <i class="fa fa-search"></i>
        </button>
      </form>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Home</a>
      </li>
      <li>
        <a href="#sub-menu" class="active" data-toggle="collapse" data-target="#sub-menu">About <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Introduction</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Vision</a>
            </li>
          </ul>
        </div>
      </li>
			<li>
        <a href="#sub-menu2" class="active" data-toggle="collapse" data-target="#sub-menu2">Courses <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu2">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Diploma in Information Technology</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in IT Support(Hardware)</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in Software 
                                       Engineering (Programming)</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Diploma in Videogame Programming</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >View All</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Flickr</a>
      </li>
    </ul>
  </div>

​

EDIT :在与OP讨论之后，这里是另一个子菜单内有子菜单的示例(以About子菜单中的Mission链接为例)：

​

代码语言：javascript
复制
 .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }
代码语言：javascript
复制
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


  <div class="side-menu-wrapper">
  <a href="#" class="menu-close">×</a>
    <ul>
    <li>
      <form class="example" action="action_page.php">
        <input type="text" placeholder="Search.." 
               name="search">
        <button type="submit">
          <i class="fa fa-search"></i>
        </button>
      </form>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Home</a>
      </li>
      <li>
        <a href="#sub-menu" class="active" data-toggle="collapse" data-target="#sub-menu">About <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Introduction</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a href="#sub-sub-menu" class="active text-decoration-none text-white" data-toggle="collapse" data-target="#sub-sub-menu">Mission <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
							<div class="collapse" id="sub-sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >First mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Second mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Third mission</a>
            </li>
          </ul>
        </div>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Vision</a>
            </li>
          </ul>
        </div>
      </li>
			<li>
        <a href="#sub-menu2" class="active" data-toggle="collapse" data-target="#sub-menu2">Courses <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu2">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Diploma in Information Technology</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in IT Support(Hardware)</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in Software 
                                       Engineering (Programming)</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Diploma in Videogame Programming</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >View All</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Flickr</a>
      </li>
    </ul>
  </div>

​

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

https://stackoverflow.com/questions/56372198

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档