HTML CSS AND JS 帮助创建响应式汉堡菜单
[英]HTML CSS AND JS Help to create responsive hamburger menu
问题描述
What I need Help with
我需要什么帮助
Hello everyone.大家好。 I need help with trying to create a responsive navbar.我在尝试创建响应式导航栏时需要帮助。 I'm trying to make it so when the web page gets smaller than a hamburger menu will appear and then that can be clicked for a drop down menu of the tabs.我正在努力做到这一点，所以当 web 页面小于汉堡菜单时，将出现一个汉堡菜单，然后可以单击该选项卡的下拉菜单。 If anyone can help me with this it will be appreciated.如果有人可以帮助我，将不胜感激。
Index.HTML索引.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>
style/CSS file样式/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{
}
2 个解决方案
解决方案1
0 2022-01-14 02:30:34
My humble suggestion is to 'stand on the shoulders of giants' so to speak and not code this yourself from scratch unless you really want the learning.我谦虚的建议是“站在巨人的肩膀上”，可以这么说，除非你真的想要学习，否则不要自己从头开始编写代码。
I recommend using MDBootstrap for creating responsive hamburger menus and other page controls you need.我建议使用 MDBootstrap 创建响应式汉堡菜单和您需要的其他页面控件。 https://mdbootstrap.com/docs/standard/extended/hamburger-menu/ https://mdbootstrap.com/docs/standard/extended/hamburger-menu/
As a developer, it can be a good idea to let the devs who have spent days/weeks/months/years working on this stuff do the work - so you can focus on the work that's unique to your project - and so you can meet your deadlines on time.作为一名开发人员，让花费数天/数周/数月/数年从事这些工作的开发人员来完成工作是一个好主意——这样你就可以专注于你的项目所独有的工作——这样你就可以结识你的最后期限准时。
Additionally when you use Bootstrap, you can be reasonably sure that these page elements will work across all platforms: ie will be compatible with various browsers, devices (mobile, laptop, etc.) and screen resolutions.此外，当您使用 Bootstrap 时，您可以合理地确定这些页面元素将适用于所有平台：即与各种浏览器、设备（移动设备、笔记本电脑等）和屏幕分辨率兼容。
解决方案2
0 2022-01-14 02:49:37
What you want is a media query .你想要的是一个media query 。 You can apply custom CSS when the screen width gets smaller.当屏幕宽度变小时，您可以应用自定义 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>
This is a small example where the navigation bar changes in mobile browsers.这是移动浏览器中导航栏发生变化的一个小例子。 To use a hamburger button, you will need some javascript to toggle the menu.要使用汉堡按钮，您需要一些 javascript 来切换菜单。 (Just give display: block to the hamburger button when on mobile) （只需display: block汉堡按钮）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.