CSS3使用列表項目彈出導航

我對網站和HTML/CSS編碼都比較陌生。我有一個任務，我假設使用列表生成一個CSS生成的彈出式菜單。下面是我在頁面頂部導航的HTML，每當我嘗試更改CSS中列表項的高度以使其彈出效果時，它會將其餘內容向下推，而不是佔用上面的空間。這是我到目前爲止的代碼：CSS3使用列表項目彈出導航

nav { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    } 
 
    nav li { 
 
    width: 18%; 
 
    margin: 5px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    border-top-left-radius: 15px; 
 
    border-top-right-radius: 15px; 
 
    border: 5px solid black; 
 
    background-color: black; 
 
    float: left; 
 
    } 
 
    nav a { 
 
    display: block; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    color: white; 
 
    text-align: center; 
 
    } 
 
    nav li:hover { 
 
    margin-top: 0px; 
 
    height: 100px; 
 
    }

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="menuItem">Home</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="menuItem">Upcoming Flights</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="menuItem">About Us</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="menuItem">Travel Guide</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="menuItem">Contact Us</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</nav>

有什麼建議？

來源

2015-11-08 rngprogramer

Pleaase，提供jsfiddle。 – Alex

不確定你在看什麼，但我想你想要類似模式彈出功能的東西。在這裏你需要一些jQuery的工作太看 - http://www.yogihosting.com/blog/jquery-modal-popup-with-animation-effects/ – yogihosting

即時對不起，我不太熟悉的術語呢。我假設使用css3屬性在我的網頁頂部創建彈出式導航。像這樣的http://ista230.com/images/assignments/7/page2.jpg – rngprogramer

這裏的關鍵是在懸停上添加一個負邊距頂部和一些額外的填充底部。我也給了nav一個特定的高度，並設置溢出隱藏，但這不是完全必要的。當然，這也不是唯一的方法。 Here's a fiddle看到它在行動。希望這可以幫助。

nav { 
    height: 58px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

nav li { 
    width: 16%; 
    margin: 14px 0 0px 14px; 
    padding: 0; 
    list-style-type: none; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    border: 5px solid black; 
    background-color: black; 
    float: left; 
} 

nav a { 
    display: block; 
    padding: 0; 
    text-decoration: none; 
    color: white; 
    text-align: center; 
} 

nav li:hover { 
    margin-top: -10px; 
    padding-bottom: 30px; 
} 

img { 
    width: 100%; 
    margin: auto; 
}

來源

2015-11-08 07:11:53 catch22

非常感謝你，這完美解決 – rngprogramer

很高興幫助:) – catch22

這裏有一種方法可以讓你的菜單彈出，而不推含量下降：

nav { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    margin-top: 75px; 
 
} 
 
nav ul { 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
nav li { 
 
    width: 18%; 
 
    margin: 5px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    border-top-left-radius: 15px; 
 
    border-top-right-radius: 15px; 
 
    border: 5px solid black; 
 
    background-color: black; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
} 
 
nav a { 
 
    display: block; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
nav li:hover { 
 
    margin-top: 0px; 
 
    height: 100px; 
 
    margin-top: -77px; 
 
} 
 
.clear { 
 
    margin-top: 100px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <div class="menuItem">Home</div> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <div class="menuItem">Upcoming Flights</div> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <div class="menuItem">About Us</div> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <div class="menuItem">Travel Guide</div> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <div class="menuItem">Contact Us</div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <div class="clear"></div> 
 
    <p>Here is the content</p> 
 
    <p>Here is more content</p> 
 
</body> 
 

 
</html>

如果給UL一個固定的位置，它不會影響其他元素在頁面上。然後，在懸停時，li的頁邊距爲-77px，因此它不會將頁面從頁面的頂部推開。也許有點黑了，但只要你的頁面足夠寬的分辨率運行，這應該可以解決你的問題。

來源

2015-11-08 06:20:37

雖然這在全屏幕上工作，但在較小的屏幕上有一些位移。 –

是的，這就是我在底部的段落中所表達的意思。原始代碼有類似的問題，我只是想解決OP的問題。 –

CSS3使用列表項目彈出導航

回答

相關問題