1. 首页
  2. 问答
  3. 如何让导航栏在所有设备上保持相同大小？

如何让导航栏在所有设备上保持相同大小？

2017-02-05 70 views
2

我想让我粘滞的导航栏横跨所有设备的页面宽度。它可以在电脑屏幕上工作，但一旦窗口收缩得足够大，它就会大大地缩小。然而，它上方的标志无论显示屏的宽度如何都可以完美缩放。我尝试使用它的属性，尽管它似乎没有改变导航栏上的输出。如何让导航栏在所有设备上保持相同大小？

我也试图使用@media强制宽度为整个窗口的70％。相反，它只影响电脑窗口。我正在使用最大宽度并将其设置为1200像素。它似乎没有做任何事情。我甚至尝试添加溢出：隐藏，以防止可能调整大小，如果有任何事情摆脱了界限。

问题在于，一旦窗口足够小，它会将导航栏中的文本更改为添加额外行的那一点。然后在对中停止工作之后不久，它就自动关闭屏幕。

这里有一个的jsfiddle惹：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/

更新：L L给我留下了一些代码，我曾经改变我的jsfiddle。它解决了导航栏从屏幕上消失的问题。它也调整完美，直到你不能再缩小窗口。不过，我仍然需要进行一些修改来修复整个外观，并将菜单返回到水平。这里是新的：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/13/

HTML：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>The Den</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> 
    <link rel="stylesheet" media="screen, projection" href="style.css"> 
    <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type ="text/javascript" src="script.js"></script> 
</head> 

<body> 
    <!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. --> 
    <div class="status"></div> 
    <div class="logo"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->   
     <center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="100%" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center> 
    </div> 
    <div class ="navigation"> 

     <!-- The navigation portion... dear God... here is where it all usually goes wrong. --> 
     <nav> 
      <ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. --> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
       <li><a href="#">Link 4</a></li> 
       <li><a href="#">Link 5</a></li> 
       <li><a href="#">Link 6</a></li> 
       <li><a href="#">Link 7</a></li> 
       <li><a href="#">Link 8</a></li> 
       <li><a href="#">Link 9</a></li> 
      </ul> 
     </nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... --> 
    </div> 
    <div class ="logo2"> 
    </div> 
    <div class ="content"> 
     <br/><br/> 
     <center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? --> 
     <br/> 
     <br/> 
     <p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 
     <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p> 

    </div>

CSS：

html { 
    padding: 0; 
    margin: 0; 
    background-color: #000; 
} 

body { 
    font-family: Helvetica, sans-serif; 
    font-size: 93%; 
    line-height: 1.5em; 
    padding: 40px 0; 
    margin: 0; 
    color: #7d0000; 
} 

a, 
a:link, 
a:visited { 
    color: blue; 
} 

h1, h2, h3, h4, h5, h6 {margin-top: 0;} 

p {margin: 0 0 1em 0;} 

.logo { 
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

.navigation { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

.logo2 { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

.content { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

h1 { 
    background-color: #305782; 
    color: #FFF; 
    padding: 60px 25px; 
    margin: 0; 
} 

nav { 
    z-index: 500; 
    background-color: #000; 
} 

.nav-placeholder { 
    margin: 0 0 40px 0; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: #000; 
} 

.fixed .nav-inner { 
    padding: 0 20px; 
} 

.fixed .nav-inner-most { 
    max-width: 100%; 
    margin: 0 auto; 
    background-color: #000; 
} 

nav ul { 
display: table; 
width: 100%; 
list-style: none; 
padding: 0; 
margin: 0; 
} 

nav ul li { 
display: table-cell; 
text-align: center; 
} 

nav ul li a:link, 
nav ul li a:visited { 
    display: block; 
    text-decoration: none; 
    padding: 10px 25px; 
    background-color: #000; 
    border: 2px solid #7d0000; 
    color: #7d0000; 
    font-size: 90%; 
    font-weight: bold; 
} 

nav ul li a:hover { 
    background-color: #28bfa1; 
    color: #FFF 
} 

@media (min-width: 1200px) { 
    .container{ 
     max-width: 70%; 
    } 
} 

/* This seems to have an undesired effect, but may be necessary for later. 
    The border-right: none; attribute is especially annoying... 

nav ul li:last-child a:link, 
nav ul li:last-child a:visited { 
    border-right: none; 
} 

*/ 

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { *zoom: 1; }

JS：

jQuery(document).ready(function() { 

    // define variables 
    var navOffset, scrollPos = 0; 

    // add utility wrapper elements for positioning 
    jQuery("nav").wrap('<div class="nav-placeholder"></div>'); 
    jQuery("nav").wrapInner('<div class="nav-inner"></div>'); 
    jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>'); 

    // function to run on page load and window resize 
    function stickyUtility() { 

     // only update navOffset if it is not currently using fixed position 
     if (!jQuery("nav").hasClass("fixed")) { 
      navOffset = jQuery("nav").offset().top; 
     } 

     // apply matching height to nav wrapper div to avoid awkward content jumps 
     jQuery(".nav-placeholder").height(jQuery("nav").outerHeight()); 

    } // end stickyUtility function 

    // run on page load 
    stickyUtility(); 

    // run on window resize 
    jQuery(window).resize(function() { 
     stickyUtility(); 
    }); 

    // run on scroll event 
    jQuery(window).scroll(function() { 

     scrollPos = jQuery(window).scrollTop(); 

     if (scrollPos >= navOffset) { 
      jQuery("nav").addClass("fixed"); 
     } else { 
      jQuery("nav").removeClass("fixed"); 
     } 

    }); 

});

谢谢你在前进，

影牙

来源

2017-02-05 Shadowfang

回答

1

，正如你在小提琴的评论中提到，表格的确是什么是扔了你的网站，或者至少这部分代码：

nav ul li { 
display: table-cell; 
text-align: center; 
}

你应该改变显示为inline-block的对例。立即你会有更多的响应行为，没有什么会脱离屏幕。它将需要一些额外的CSS更改，使其看起来不错，例如删除菜单li元素内的元素的填充。随着屏幕缩小，屏幕上将出现的菜单项将跳入新行。如果你想避免这种情况，你可以设置一个固定的宽度，以％为单位。看看你的代码让我觉得这应该足以让你去，让我知道这是否有帮助。

来源

2017-02-06 00:14:00

+0

其实你已经帮了很多忙。最令人头疼的事实是它会迫使自己脱离屏幕。我更新了JSFiddle以显示其当前状态。我想让菜单回到水平而不会失去集中。其他一切都很完美。相反，它可能会出现，我其实是非常新的。所以感谢你的耐心。我也更新了JSFiddle。 – Shadowfang

+0

@L L现在，如果我从'nav ul li'中删除宽度属性，导航栏就会保持左侧，但保持导航栏保持垂直。我不完全确定如何解决这个问题。但是一旦这个问题解决了，我会将你的答案标记为完整的，因为它解决了我上面提到的所有问题。 – Shadowfang

+0

这就是我要添加的内容：'nav ul li {margin：5px; display：inline-block}'还有'nav ul {text-align：center;}'。这似乎是在窗口大小调整以及可以看到的情况下获得可接受行为的最简单方法。这是一个小提琴https://jsfiddle.net/jtg6vtz4/ –

相关问题

 相关问题