Question

我想制作我的菜单，以便当我处于某个窗口大小时，就像在移动设备上一样，我的菜单将转换为垂直下拉手风琴菜单。我熟悉媒体查询和响应/自适应设计，但我无法在悬停或点击时垂直放下/滑下我的子菜单。

这是我的Fiddle

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;
}

Answer 1

Here you go

@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
  }
}

Answer 2

在您的移动布局的媒体查询中添加类似的内容

#navmenu li {
  display: block;
  text-align: center;
  float:none;   
}

#navmenu  li ul {
  display: none;
  position: relative;
  top:0;
  visibility:hidden;
}

因为关于如何显示子菜单的技术纯粹是css（：悬停在父级和可见性：可见），我们需要js / jquery，因为我们的子菜单是display：none now

$('li.slidedown').hover(function() {
  $(this).find('ul').slideDown();
}, function() {
  $(this).find('ul').slideUp();
});

没有检查我的代码，我希望你明白我的观点

如何将带有垂直子菜单的水平菜单转换为带子菜单的垂直手风琴菜单？

2 个答案: