1. 首頁
  2. 問答
  3. 如何讓導航欄在所有設備上保持相同大小？

如何讓導航欄在所有設備上保持相同大小？

2017-02-05 68 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/ –

相關問題

 相關問題