我需要什么幫助
大家好。我在嘗試創建回應式導航欄時需要幫助。我正在努力做到這一點，以便當網頁變得小于漢堡選單時會出現，然后可以單擊該選項卡的下拉選單。如果有人可以幫助我，將不勝感激。
索引.HTML
<!DOCTYPE html><html>
<head>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
</head>
<body>
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
<a href="index.html" class="active">Home</a>
<a href="services.html">Services</a>
<a href="about.html">About Us</a>
<a href="blog.html">Contact</a>
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
</body>
樣式/CSS 檔案
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content
(content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
position: fixed;
padding-right: 10rem;
top: 0px;
right: 0px;
text-align:right;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
.icon{
}
uj5u.com熱心網友回復：
你想要的是一個media query. 當螢屏寬度變小時，您可以應用自定義 CSS。
html,
body {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
min-height: 50px;
background-color: red;
}
.navitem {
width: 70px;
height: 50px;
line-height: 50px;
color: white;
text-decoration: none;
font-size: 20px;
display: inline-block;
text-align: center;
}
.navitem:hover {
background-color: white;
color: red;
}
.content {
padding: 10px;
}
@media screen and (max-width: 500px) {
/* This CSS is only applied when the screen width is smaller than 500px. */
.navitem {
display: block;
width: 100%;
}<div class="navbar">
<a href="#" class="navitem">Link 1</a>
<a href="#" class="navitem">Link 2</a>
<a href="#" class="navitem">Link 3</a>
<a href="#" class="navitem">Link 4</a>
</div>
<div class="content">
<h1>Media Queries</h1>
<p>Try resizing this window. The navigation links will show in stacks in mobile devices.</p>
</div>這是移動瀏覽器中導航欄發生變化的一個小例子。要使用漢堡按鈕，您需要一些 javascript 來切換選單。（在移動設備上只需給display: block漢堡按鈕）
uj5u.com熱心網友回復：
我謙虛的建議是“站在巨人的肩膀上”，可以這么說，除非你真的想要學習，否則不要自己從頭開始撰寫代碼。
我建議使用 MDBootstrap 創建回應式漢堡選單和您需要的其他頁面控制元件。 https://mdbootstrap.com/docs/standard/extended/hamburger-menu/
作為一名開發人員，讓花費數天/數周/數月/數年從事這些作業的開發人員完成作業是一個好主意——這樣你就可以專注于你的專案所獨有的作業——這樣你就可以結識你的最后期限準時。
此外，當您使用 Bootstrap 時，您可以合理地確定這些頁面元素將適用于所有平臺：即與各種瀏覽器、設備（移動設備、筆記本電腦等）和螢屏解析度兼容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410709.html
標籤：
上一篇：向下滾動時頂部帶有固定列的引導表