3

モバイルのように特定のウィンドウ サイズになったときに、メニューが垂直ドロップダウン アコーディオン メニューに変換されるように、メニューを作成したいと考えています。メディアクエリとレスポンシブ/アダプティブデザインに精通していますが、ホバーまたはクリックでサブメニューを垂直にドロップ/スライドダウンさせることができません。

これが私のフィドルです

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

2 に答える 2

2

どうぞ

@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
  }
}
于 2013-08-01T03:04:00.590 に答える
1

モバイルレイアウトのメディアクエリにこのようなものを入れてください

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

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

サブメニューを表示する方法に関するあなたのテクニックは純粋に css (:hover on parent and visibility:visible) であるため、子メニューが display:none であるため、js/jquery が必要です。

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

私のコードをチェックしていません。

于 2013-08-01T03:03:52.433 に答える