窗口调整大小时的中心导航栏？ [英] Center Nav Bar when window resized?
问题描述
我的导航栏位于中心位置，但是当窗口较小时，它只会进入下一行，而不是缩小以适应窗口的大小，而且我不知道如何解决它。它下了元素。我也会在移动设备上查看时将其转换为垂直列表，但无法接近媒体查询。
My navigation bar is centered, but when the window is smaller, it just goes onto the next line, rather than getting smaller to fit the size of the window, and I don't know how to resolve it. It's got drop down elements on it. I'll also be looking at turning this to a vertical list when viewed on mobile devices, but nowhere near doing media queries yet.
这是我的HTML：
<nav id="page-navigation">
<ul>
<li><a href="index.html">Home</a></li>
<ul class="top-menu">
<li><a href="_portfolio/photography.html" onclick="return false">Photography</a>
<ul class="sub-menu">
<li><a href="_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
<li><a href="_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
<li><a href="_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
<li><a href="_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
<li><a href="_portfolio/_photography/nature.html">Nature</a></li>
<li><a href="_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
<li><a href="_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
<li><a href="_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
</ul>
</li>
<li><a href="_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
<ul class="sub-menu">
<li><a href="_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
<li><a href="_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
<li><a href="_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
<li><a href="_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
<li><a href="_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
<li><a href="_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
<li><a href="_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
</ul>
</li>
<li><a href="_portfolio/3d-modelling.html">3D Modelling</a></li>
</ul>
<li><a href="about.html">About</a></li>
<li><a href="recognition.html">Recognition</a></li>
</ul>
</nav>
这里是我的CSS：
/*navigation*/
#page-navigation
{
width: 60%;
height: 53px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul li
{
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
float: left;
}
li
{
position: relative;
}
li.title
{
display: none;
}
li a
{
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link
{
text-decoration: none;
}
li a:visited
{
text-decoration: none;
color: white;
}
li a:hover, .top-menu > li:hover > a
{
background-color: rgb(48,48,48);
}
li a:active
{
background-color: dimgray;
}
ul.sub-menu
{
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li
{
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu li:hover ul
{
left: 0;
}
ul.sub-menu li a
{
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a
{
border-bottom: none;
}
ul.sub-menu li a:hover
{
background-color: darkslategray;
}
ul.sub-menu li a:active
{
background-color: gray;
}
谢谢。
推荐答案
答案：
由于HTML文档的结构方式，您得到以下原因的预期效果：
Because of the way your HTML document is structured, it's not possible for you to get the intended effect for the following reason:
- 您有一个无序列表直接嵌套在另一个无序列表中，它是（1）不认为正确（查看此讨论）;但更重要的是，虽然看起来您的导航有6个顶级项目，但您确实只有4个。所以，无论你应用什么CSS，都不行。
- You have an unordered list nested directly in another unordered list which is (1) not considered correct (see this discussion); but more importantly, while it looks like your navigation has 6 top level items, you really only have 4. So no matter what CSS you apply to it, it won't work.
建议：
-
修复您的HTML文档首先通过在顶部导航项目上使用正确的类，并正确地嵌套您的导航项目。*
Fix the structure of your HTML document first by using the proper classes only on the top navigation items and properly nest your navigation items.*
我建议重组信息架构以减少菜单上的导航项。例如，您的关于页面中的识别将是有意义的。如果这是一个投资组合类型的网站，将您的摄影，平面设计和3D建模折叠成项目将会很好地工作。如果你关心分离，那么这个页面将作为一个子导航。
I would advise restructuring you information architecture to contain less navigation items on the menu. For example, the recognition would make sense to go in your About page. And if this is a portfolio type website, collapsing your Photography, Graphic Design, and 3D Modeling into Projects would work well. And if you're concerned with the separation, that will happen within the page as a sub-navigation.
如果你保持导航结构，建议您将菜单折叠到移动设备上的选择菜单或汉堡包菜单中，因为您的导航所消耗的大量人员的移动设备屏幕对您的用户来说不是一个好的体验。除此之外，您必须考虑到用户无法在移动设备上悬停，而且这些下拉列表的大小将很难导航。
If you are set on keeping the navigation structure, it's advisable to either collapse your menu into a select menu or hamburger menu on mobile devices since having a large chunk someone's mobile device screen consumed by your navigation is not a good experience for your user. On top of it, you have to consider that users can't "hover" on mobile devices and the size of those dropdowns would be difficult to navigate at best.
*解决方案： 演示
HTML（修正）：
<nav id="page-navigation">
<ul>
<li><a href="../../index.html" title="Home">Home</a></li>
<li class="top-menu"><a href="../../_portfolio/photography.html" onclick="return false">Photography</a>
<ul class="sub-menu">
<li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
<li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
<li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
<li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
<li><a href="../../_portfolio/_photography/nature.html">Nature</a></li>
<li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
<li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
<li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
</ul>
</li>
<li class="top-menu"><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
<ul class="sub-menu">
<li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
<li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
<li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
<li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
<li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
<li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
<li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
</ul>
</li>
<li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li>
<li><a href="../../about.html">About</a></li>
<li><a href="../../recognition.html">Recognition</a></li>
</ul>
</nav>
CSS（固定和更新）：
CSS (Fixed and Updated):
/*navigation*/
#page-navigation {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul {
text-align: center;
}
#page-navigation ul li {
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
/* float: left removes any possibility of it centering */
display: inline-block;
}
li {
position: relative;
}
li.title {
display: none;
}
li a {
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
color: white;
}
li a:hover,
.top-menu > li:hover > a {
background-color: rgb(48, 48, 48);
}
li a:active {
background-color: dimgray;
}
ul.sub-menu {
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li {
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu:hover ul {
left: 0;
}
ul.sub-menu li a {
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a {
border-bottom: none;
}
ul.sub-menu li a:hover {
background-color: darkslategray;
}
ul.sub-menu li a:active {
background-color: gray;
}
ul.top-menu {
padding: 0;
}
还有一些小样式可以调整，但这应该让你得到什么根据你的问题想要。
There are still some minor stylings to adjust, but this should get you what you wanted based on your question.
这篇关于窗口调整大小时的中心导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
