[英]How do I center a responsive navigation bar menu with CSS and HTML only?
I'm getting into creating responsive design, so I wanted to make a responsive menu. 我正在创建响应式设计,因此我想制作一个响应式菜单。 I found one online that uses CSS and HTML only (no JavaScript or Bootstrap) and I'm tweaking it to my liking. 我在网上找到了一个仅使用CSS和HTML的网站(没有JavaScript或Bootstrap),并且根据自己的喜好进行了调整。 But I'm running in to lots of problems trying to apply normal properties to elements. 但是我在尝试将普通属性应用于元素时遇到了很多问题。 I have a background div that's used to make the nav bar go 100% across the screen (because the original one I got only goes like 25% of the way across the screen), and I also created a container div so that I could put the menu in it. 我有一个背景div,用于使导航栏在屏幕上100%移动(因为我原来的导航栏只在屏幕上移动25%),并且我还创建了一个容器div,以便我可以菜单。 However, when I try to center the menu itself, I either get errors with my responsive menu (which will appear when you shrink the browser window) or I get lots of other junky things happening to the elements on the page. 但是,当我尝试将菜单本身居中时,我的响应式菜单会出现错误(在缩小浏览器窗口时会出现),或者页面元素上发生了很多其他混乱的事情。 Here's the code I'm working with right now. 这是我现在正在使用的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
}
#menuBackground {
background: #2f3036;
width: 100%;
height: 50px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 16px 0;
display: none;
width: 100% !important;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
margin: 0 auto;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
</style>
</head>
<body>
<div id="menuBackground">
<div id="menuContainer">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ↓</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio ↓</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web & User Interface Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
I got rid of the horrible floats, fixed your positioning issues and centered the menu. 我摆脱了可怕的浮标,解决了定位问题并将菜单居中。
body {
margin:0
}
#menuBackground {
background:#2f3036;
width:100%;
height:50px;
text-align: center;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height:50px;
text-align:center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
li:hover a {
background:#19c589
}
/*Style for dropdown links*/
li:hover ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background:#19c589;
color:#fff
}
/*Hide dropdown links until they are needed*/
li ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
li ul li {
display:block;
}
/*Prevent text wrapping*/
li ul li a {
width:auto;
min-width:100px;
padding:0 20px
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#19c589;
text-align:center;
padding:16px 0;
display:none;
width:100%!important
}
/*Hide checkbox*/
input[type=checkbox] {
display:none
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}
/*Responsive Styles*/
@media screen and (max-width : 760px) {
/*Make dropdown links appear inline*/
ul {
position:static;
display:none;
white-space: initial;
}
/*Create vertical spacing*/
li {
margin-bottom:1px
}
/*Make all menu links full width*/
ul li,li a {
width:100%
}
/*Display 'show menu' link*/
.show-menu {
display:block
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.