首页
学习
活动
专区
工具
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代码,确保我一切正常。

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

复制
相关文章

相似问题

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