如何将具有垂直子菜单的水平菜单转换为具有子菜单的垂直手风琴菜单？ [英] How to convert a Horizontal Menu with vertical submenus into a Vertical Accordion menu with submenus?

问题描述

我想让我的菜单，使我在一定的窗口大小，就像在手机上，我的菜单将转换成一个垂直的下拉手风琴菜单。我熟悉媒体查询和响应/自适应设计，但是我无法让我的子菜单垂直放下/滑下，无论是悬停还是点击。

I want to make my menu so that when I am at a certain window size, like on mobile, my menu will convert to a vertical drop down accordion menu. I am familiar with media queries and responsive/adaptive designs, but I can't get my submenu to vertically drop/slide down, either on hover or click.

这是我的小提琴

HTML：

<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr>
     <td> 

     <div id="navmenu"> <!--#navmenu DIV menu contents start here-->
     <ul> 

<li>    
    <a href="index.php" class="mainlist">HOME</a>
</li>

<li>
    <a href="about.php" class="mainlist">ABOUT ME</a>
</li>




<li class="slidedown">    
    <a href="graphicdesign.php" class="mainlist">GRAPHIC DESIGN</a>
    <ul>
    <li><a href="graphicdesign/hobbyist-independent.php">Hobbyist/Independent</a></li>    
    <li><a href="graphicdesign/job&amp;freelance.php">Job & FreeLance</a></li>
    <li><a href="graphicdesign/universityatbuffalo.php">University At Buffalo</a></li>
    </ul>
</li>


<li class="slidedown"> 
    <a href="webdesign.php" class="mainlist">WEB DESIGN</a>
    <ul>
    <li>Hobbyist/Independent</li>
    <li>Job & FreeLance</li>
    <li>University At Buffalo Website</a></li> 
    </ul>
</li>


<li class="slidedown">
    <a href="photography.php" class="mainlist">PHOTOGRAPHY</a>
    <ul>
    <li><a href="photography/hobbyist-independent.php">Hobbyist/Independent</a></li>
    <li><a href="photography/job&amp;freelance.php">Job & Freelance</a></li>
    <li><a href="photography/studentprojects.php">Student Projects</a></li>
    </ul>
</li>


<li>
    <a href="contactme.php" class="mainlist">CONTACT ME</a>
</li>

    </ul>
    </div> <!--#navmenu DIV menu contents end here-->

    </td>
  </tr>
</table> 
<!--menu under header ends-->

CSS：

html, body {
  height: 100%;
  overflow-x:hidden;
  overflow-y:hidde;
  margin:auto;
}
#wrap {
  margin:auto;
  min-height: 100%;
  background-image: url(style/flourish-bg.png);
  background-repeat:no-repeat; 
  background-position: top center;
  z-index:0;
}
#header {
    width:1024px; 
    height:160px;
    background-repeat: no-repeat;
}
#bgheader {
  background-image: url(style/bgheader.jpg);
  background-repeat:repeat-x;
  height:160px;
}   
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  background-repeat: no-repeat;
  background:#000;
}

/*----------MENU-----------*/


/*main menu*/

a:link {color:#fff; text-decoration:none;}
a:visited {color: #868D65;}
a:hover {color:#000;}
a:active {color: #868D65;}

#navmenu {
  width:100%;
  height:80px;
  margin-right:auto;
  margin-left:auto;
}

/*holds the listed items on main menu*/
#navmenu ul {
  width:100%;
  margin:0;
  padding: 0;
  list-style:none;
  text-decoration:none;
}

/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
#navmenu li {
  float:left;   
  padding: 30px 7px; 
  position:relative;
  list-style:none; 
  text-decoration:none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:12px;
  text-decoration: none;
  border-top: 2px solid  #868D65;
  border-bottom: 2px solid  #868D65;
  transition: border-radius 1s, background 1s;
  -moz-transition: -moz-border-radius 1s, background 1s;
  -webkit-transition: -webkit-border-radius 1s, background 1s;
  z-index:200;
}

/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
#navmenu li:hover {
  background: #eee;
  background-image: url(style/bgheader.jpg); 
  transition: border-radius 1s, background 1s;
 -moz-transition: -moz-border-radius 1s, background 1s;
 -webkit-transition: -webkit-border-radius 1s, background 1s;
 z-index:200;
}
/*SUB MENU STARTS*/


/*this hides the submenu*/
#navmenu  li ul {
  position: absolute;
  top:75px;
  visibility:hidden;
  padding-left:0px;
}
/*this shows the submenu on hover over main menu*/
#navmenu  li:hover ul {visibility:visible;}

/*sub menu styling*/
#navmenu li ul li {
  float:none;
  width: 160px;
  font-size:12px;
  text-align:center;
  padding: 15px 5px 10px 5px;
  background: #222222;
  border: 1px solid #FFF; 
  color: #FFF;
  position:relative;
  margin-left: -6px;
}

/*sub menu styling for hover*/
#navmenu li ul li:hover {
  font-size:12px; 
  color: #000; 
  background-color: #868D65;
}

推荐答案

你去哪里

@media (max-width:600px) {
  tr td #navmenu li {
    width:100%; // makes each item takes up the whole screen
  }
  tr td #navmenu li ul {
    position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items
    top:0; // puts it right next to the menu item
    display:none; // so there is no unnecessary white space when the `li` isn't being hovered over
  }
  tr td #navmenu li:hover ul {
    display:block; // shows the submenu when you hover over the higher `li`s
  }
}

这篇关于如何将具有垂直子菜单的水平菜单转换为具有子菜单的垂直手风琴菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！