在html中響應的菜單

我有一個桌面視圖，這是當鼠標懸停，一個.gif圖像將覆蓋完美的菜單。當設備寬度低於768px時，菜單響應正在工作，但是在顯示所有圖像而不是菜單的默認視圖的圖像疊加中出現問題。在html中響應的菜單

參考此鏈接以查看該設計http://testing.x-renaissance.com/

該網站的設計是使用HTML +引導

CSS

.overlay { 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    right: 0; 
    background-color: #000; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    transition: .5s ease; 
    text-align: center; 
} 
.overlay img { height: 50px; } 
.nav-menu li:hover .overlay { bottom: 0; height: 100%; }

HTML

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 

     <div class="navbar-header"> 
      <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" rel="Menu1" href="#" title=""> 
       LOGO 
      </a> 
     </div> 

     <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse"> 
      <ul class="nav navbar-nav nav-menu"> 
       <li class=""> 
        <a href="#" class="" title="Menu1"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu1 
        </a> 
       </li> 
       <li> 
        <a href="#" class="h" title="Menu2"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu2 
        </a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Menu3"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu3 
        </a> 
       </li> 
       <li> 
        <a href="#" class="" title="Menu4"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu4 
        </a> 
       </li> 
       <li> 
        <a href="#" class="" title="Menu5"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu5 
        </a> 
       </li> 
       <li> 
        <a href="#" class="" title="Menu6"> 
         <div class="overlay"> 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
         </div> 
         Menu6 
        </a> 
       </li> 
      </ul> 
     </div> 

    </div> 
</div>

來源

2017-07-16 Linundus Ondu

當打開漢堡包菜單，bootstrap.min.js拋出的錯誤消息。 – Gerard

這是因爲你依賴於隱藏高度，但當它變成摺疊菜單時，它不再具有該選項。我創建了一個媒體查詢，當它摺疊時，它會根據位置隱藏它。 https://codepen.io/anon/pen/KqYgLX?editors=1010

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
 
<title>Testing</title> 
 

 
<link href="./assets/default/css/header-slider.css" rel="stylesheet"/> 
 
<link href="./assets/default/css/custom.css" rel="stylesheet"/> 
 
<link href="./assets/plugin/Hover-master/css/hover.css" rel="stylesheet" media="all"> 
 
<link href="./assets/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 
 
<!-- bootstrap link --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<!-- end of bootstrap link --> 
 

 
</head> 
 
<body><style type="text/css"> 
 
    .overlay { 
 
     position: absolute; 
 
     bottom: 100%; 
 
     left: 0; 
 
     right: 0; 
 
     background-color: #000; 
 
     overflow: hidden; 
 
     width: 100%; 
 
     height: 100%; 
 
     transition: .5s ease; 
 
     text-align: center; 
 
    } 
 
    .overlay img { height: 50px; } 
 
    .nav-menu li:hover .overlay { bottom: 0; height: 100%; } 
 
    .navbar-inverse .navbar-nav>.active>a>.overlay { bottom: 0; height: 100%; } 
 
    @media screen and (max-width: 768px) { 
 
     .overlay { 
 
      bottom: 0 !important; 
 
      left: 100% !important; 
 
      background-color: red !important; 
 
     } 
 
     .nav-menu li:hover .overlay { left: 0 !important; height: 100%; } 
 
    } 
 
</style> 
 

 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 

 
     <div class="navbar-header"> 
 
      <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" rel="Menu1" href="#" title=""> 
 
       LOGO 
 
      </a> 
 
     </div> 
 
     
 
     <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse"> 
 
      <ul class="nav navbar-nav nav-menu"> 
 
       <li class=""> 
 
       \t <a href="#" class="" title="Menu1"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
         Menu1 
 
\t \t \t \t \t </a> 
 
       </li> 
 
       <li> 
 
       \t <a href="#" class="h" title="Menu2"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
       \t \t Menu2 
 
       \t </a> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Menu3"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
        \t Menu3 
 
        </a> 
 
       </li> 
 
       <li> 
 
       \t <a href="#" class="" title="Menu4"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
       \t \t Menu4 
 
       \t </a> 
 
       </li> 
 
       <li> 
 
       \t <a href="#" class="" title="Menu5"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
       \t \t Menu5 
 
       \t </a> 
 
       </li> 
 
       <li> 
 
       \t <a href="#" class="" title="Menu6"> 
 
         <div class="overlay"> 
 
          <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif"> 
 
         </div> 
 
       \t \t Menu6 
 
       \t </a> 
 
       </li> 
 
      </ul> 
 
\t \t </div> 
 

 
    </div> 
 
</div>

來源

2017-07-16 11:32:44 Win

謝謝。這很好！ :) –

在html中響應的菜單

回答

相關問題