窗口调整大小时中心导航栏？ [英] 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:
- 您有一个无序列表直接嵌套在另一个无序列表中，认为正确（参见此讨论）;但更重要的是，虽然看起来你的导航有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屋！
