2016-02-29 138 views
1

導航工作正常,直到一個特定的寬度(約1100px)。如果寬度變小,則鏈接不再可點擊。我不知道爲什麼。我發現的唯一的事情是,當我添加一些文本(例如在第51行「mediaquery ...」)時,比導航作品,但它的背景色成爲白色而不是原來的深灰色。崩潰css3導航不可點擊

你知道我在做什麼錯嗎?

下面是代碼:


<html lang="de"> 
    <head> 
     <meta charset="utf -8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="main.css"> 


     <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 

     <!--[if lt IE 8]> 
      <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <!--[if lt IE 9]> 
      <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title> 


     <style> 

      *{ 
       font-family: helvetica,arial,sans-serif; 
      } 

      @media (max-width: 1300px) and (min-width: 0px) { 
       #luecke_nav1 { 
        display: none; 
       } 
      } 

      @media (max-width: 1029px) { 
       .heading #seitentitel h1 { 
       font-size: 140%; 
       } 
      } 

      @media (min-width: 1029px) { 
       .menu { 
       font-size: 1.2em; 
       } 
      } 

      mediaqueryzerhautklassedanach 

      .menu { 
       padding: 0.5em; 
       background: #414141; 
       min-height: 3em; 
       line-height: 1em; 
       position: fixed; 
       top: 0; 
       left: 0; 
       z-index: -6; 
      } 

      .menu > ul { 
       transition: max-height 0.25s linear; 
      } 

      .menu ul { 
       margin: 0; 
       padding: 0; 
       text-align: center; 
      } 

      .menu li { 
       transition: visibility .25s linear; 
       display: inline-block; 
       padding: .45em 1.1em; 
       margin: 0 .3em; 
       position: relative; 
      } 

      @media (min-width: 841px) { 
       .menu li ul { 
       display: none; 
       position: absolute; 
       top: 100%; 
       margin-top: 1px; 
       left: -1px; 
       right: -1px; 
       } 

       .menu li:hover ul { 
       display: block; 
       } 

       .menu li li { 
       margin: -1px 0 0 0; 
       box-sizing: border-box; 
       width: 100%; 
       } 

       #logo { 
        display: none; 
       } 
      } 

      @media (max-width: 841px) { 
       #nav_kasten { 
       display: none; 
       } 

       .hvr-bounce-in{ 
         display: inline-block; 
         vertical-align: middle; 
         -webkit-transform: translateZ(0); 
         transform: translateZ(0); 
         box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
         -webkit-backface-visibility: hidden; 
         backface-visibility: hidden; 
         -moz-osx-font-smoothing: grayscale; 
         -webkit-transition-duration: 0.5s; 
         transition-duration: 0.5s; 
       } 

       .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { 
       -webkit-transform: scale(1.2); 
        transform: scale(1.2); 
        -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); 
        transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); 
       } 

       #luecke_nav{ 
       display: none; 
       } 

       .menu > ul { 
       max-height: 0; 
       overflow: hidden; 
       margin: 0 3.5em 0 1em; 
       } 

       .menu li { 
       visibility: hidden; 
       display: block; 
       padding: 0.5em 0.6em; 
       border: none; 
       } 

       .menu li ul { 
       margin-top: 0.5em; 
       border-left: 1px solid #000; 
       } 

       .menu .navbar-handle { 
       display: block; 
       } 

       #navbar-checkbox:checked + .menu ul { 
       max-height: 300px; 
       } 

       #navbar-checkbox:checked + .menu li { 
       visibility: visible; 
       } 

       #navbar-checkbox:checked + .menu .navbar-handle, 
       #navbar-checkbox:checked + .menu .navbar-handle:after, 
       #navbar-checkbox:checked + .menu .navbar-handle:before { 
       border-color: #2098d1; 
       } 
      } 

      .navbar-checkbox { 
       display: none; 
      } 

      .navbar-handle { 
       display: none; 
       cursor: pointer; 
       position: relative; 
       font-size: 45px; 
       padding: .5em 0; 
       height: 0; 
       width: 1.66666667em; 
       border-top: 0.13333333em solid; 
       color: #2098d1; 
      } 

      .navbar-handle:before, 
      .navbar-handle:after { 
       position: absolute; 
       left: 0; 
       right: 0; 
       content: ' '; 
       border-top: 0.13333333em solid; 
      } 

      .navbar-handle:before { 
       top: 0.37777778em; 
      } 

      .navbar-handle:after { 
       top: 0.88888889em; 
      } 

      .menu { 
       top: 0; 
       left: 0; 
       right: 0; 
      } 

      .menu .navbar-handle { 
       position: fixed; 
       font-size: 1.2em; 
       top: 0.7em; 
       right: 12px; 
       z-index: 10; 
      } 

      /* Overline From Center */ 

      .hvr-overline-from-center { 
       display: inline-block; 
       vertical-align: middle; 
       -webkit-transform: translateZ(0); 
       transform: translateZ(0); 
       box-shadow: 0 0 2px rgba(0, 0, 0, 0); 
       -webkit-backface-visibility: hidden; 
       backface-visibility: hidden; 
       -moz-osx-font-smoothing: grayscale; 
       position: relative; 
       overflow: hidden; 
      } 

      .hvr-overline-from-center:before { 
       content: ""; 
       position: absolute; 
       z-index: -1; 
       left: 50%; 
       right: 50%; 
       background: #2098d1; 
       height: 7px; 
       top: -20%; 
       -webkit-transition-property: left, right; 
       transition-property: left, right; 
       -webkit-transition-duration: 0.3s; 
       transition-duration: 0.3s; 
       -webkit-transition-timing-function: ease-out; 
       transition-timing-function: ease-out; 
      } 

      .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { 
       left: 0; 
       right: 0; 
      } 

      a:link, a:visited, a:active { 
       text-decoration: none; 
       color: #2098d1; 
      } 

      a:hover { 
       text-decoration: none; 
       color: #2098d1; 
      } 

      #lim_logo { 
       width: 50%; 
       margin-top: 8%; 
       text-align: center; 
       z-index: 99; 
      } 

      #nav_kasten { 
       width: 14.7%; 
       height: 40%; 
       z-index: 99; 
       position: absolute; 
       top: 0; 
       margin-left: 42%; 
      } 

      #base { 
       position: relative; 
       display: inline-block; 
       width: 100%; 
       text-align: center; 
       color: white; 
       background: gray; 
       text-decoration: none; 
       padding-bottom:15%; 
       background-clip:content-box; 
       overflow:hidden; 
      } 

      #base:after { 
       content: ""; 
       position: absolute; 
       top:83%; 
       left: 0; 
       background-color:inherit; 
       padding-bottom:50%; width:57.7%; 
       z-index: -1; 


       -webkit-transform-origin:0 0; 
       -ms-transform-origin:0 0; 
       transform-origin:0 0; 

       -webkit-transform: rotate(-30deg) skewX(30deg); 
       -ms-transform: rotate(-30deg) skewX(30deg); 
       transform: rotate(-30deg) skewX(30deg); 
      } 

      .hvr-bounce-in { 
      } 

      .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { 
      } 

      #logo{ 
       width: 15%; 
       top: 2%; 
       left: 1%; 
       z-index: 4; 
       position: fixed; 
      } 

      .heading { 
       background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
       background-attachment: fixed; 
       z-index:-7; 
       padding: 18%; 
      } 

      #seitentitel { 
       background-color:rgba(255,255,255,0.7); 
       text-align: center; 
       padding: 2%; 
       margin: 0.5%; 
      } 

      .linie { 
       border :none; 
       border-top: 1px solid #0090E0; 
       background-color:#FFFFFF; 
       height: 1px; 
       margin: 0px 80px 0px 80px; 
      } 



     </style> 

    </head> 


    <body> 

     <header> 
      <div id="nav_kasten">      
        <a href="#" id="base"><img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif"></a> 
      </div> 

      <div id="logo"> 
        <a href="#" id="base"><img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif"></a> 
      </div> 

      <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox"> 
      <nav class="menu"> 
       <ul> 
       <li><a href="#home" class="hvr-overline-from-center active">Home</a></li> 
       <li><a href="#team" class="hvr-overline-from-center">Team</a></li> 
       <li><a href="#publications" class="hvr-overline-from-center">Ver&ouml;ffentlichungen</a></li> 
       <li id="luecke_nav"><div id="luecke_nav1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> 
       <div id="luecke_nav2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></li> 
       <li><a href="#projects" class="hvr-overline-from-center">Projekte</a></li> 
       <li><a href="#thesis" class="hvr-overline-from-center">Abschlussarbeiten</a></li> 
       <li><a href="#links" class="hvr-overline-from-center">Links</a></li> 
       </ul> 

       <label for="navbar-checkbox" class="navbar-handle hvr-bounce-in"> 
      </nav> 
     </header> 

     <div class="col-md-12 heading"> 
      <div id="seitentitel"> 
       <hr class="linie"> 
       <h1> Arbeitsgruppe <br> Wolken und globales Klima</h1> 
       <hr class="linie"> 
      </div> 
     </div> 


     <div class="col-md-12 text2"> 
      <h2 style="text-align: center;"></h2> 
      <br> 

      <div class="col-md-6"> 

      </div> 

      <div class="col-md-12"> 

      </div> 
     </div> 




     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

     <script> 

     </script> 

    </body> 

+0

它在這裏工作https://jsfiddle.net/z2c592d7/ – silviagreen

+0

是的,但只有,因爲增加了文字。這裏的問題是導航是白色而不是深灰色。 –

回答

0

因此,所有加入該文本確實基本上呈現從下面的CSS的休息站的瀏覽器。你需要做的是;

1)刪除你在CSS中添加的文本。

2)刪除.menu.heading上的z索引。這就是問題。您已將較低的z索引應用到.heading,但由於它存在於html中,堆積順序高於.menu,因此它無法按照您的預期工作。所以.heading正在隱藏你的.menu

這應該解決你的問題。

而且我注意到:

a)您使用的副本ID您的標誌形象。 #lim_logo改爲使用類,然後相應地取消您的css。

b)就在您關閉</nav>之前,您錯過了關閉</label>標記。

c)更新您的媒體查詢表達式。最大寬度應該(在大多數情況下)停在斷點以下。例如,你可能在1300px處有一個斷點,所以在該斷點下面的目標的最大寬度將是1299px。然後從該斷點開始定位的最小寬度將爲1300px。包含最小寬度:0px沒有意義,因爲這是暗示的。

+0

非常感謝!有用!但是.menu中的z-index需要保留。 非常感謝你! :-) –