响应式导航菜单项目 - 两个div彼此相邻

我正在创建一个项目以创建响应式导航菜单。我现在的目标是将导航菜单切换从顶部显示切换到平板设备的侧面显示（屏幕宽度小于800像素）。响应式导航菜单项目 - 两个div彼此相邻

在我的媒体查询中，我通过设置float：initial;将li恢复为垂直对齐。并设置浮动：离开;为主导航div和浮动：右;为内容div。但是，由于某些原因，content div仍然在主导航div下堆叠。

body { 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
    border:none; 
 
} 
 

 
.content { 
 
    width:100%; 
 
    max-width:1000px; 
 
    margin:auto; 
 
} 
 

 
.main-nav { 
 
    width:100%; 
 
    max-width:1000px; 
 
    height:40px; 
 
    background-color:#004d99; 
 
    color:#ffffff; 
 
    margin-top:0px; 
 
    margin-bottom:0px; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    border:none; 
 
    border-collapse:collapse; 
 
} 
 

 
.main-nav ul { 
 
    float:right; 
 
    margin-top:0px; 
 
    margin-bottom:0px; 
 
    list-style-type:none; 
 
    padding: 0px; 
 
    border:none; 
 
    border-collapse:collapse; 
 
} 
 

 
.main-nav li a { 
 
    display:block; 
 
    color:#ffffff; 
 
    font-family:arial,helvetica,sans-serif; 
 
    text-decoration:none; 
 
} 
 

 
.main-nav li { 
 
    float:left; 
 
    padding: 10px 10px 10px 10px; 
 
    background-color:#004d99; 
 
    color:#ffffff; 
 
    border:none; 
 
    border-collapse:collapse; 
 
    margin:0px; 
 
} 
 

 
.main-nav li:hover { 
 
    background-color:#0073E5; 
 
} 
 

 
.header { 
 
    width:100%; 
 
    height:auto; 
 
} 
 

 
.header img { 
 
    width:100%; 
 
} 
 

 
/*Tablet Screens*/ 
 
@media only screen and (max-width:800px) { 
 
    .main-nav { 
 
    width:200px !important; 
 
    height:800px !important; 
 
    margin-right:0px !important; 
 
    margin-left:0px !important; 
 
    overflow:hidden; 
 
    float:left !important; 
 
    clear:none !important; 
 
    } 
 
    
 
    .main-nav ul { 
 
    float:left !important; 
 
    width:100% !important; 
 
    height:auto !important; 
 
    } 
 
    
 
    .main-nav li { 
 
    float:initial !important; 
 
    width:100% !important; 
 
    height:auto !important; 
 
    } 
 
    
 
    .content { 
 
    float:right !important; 
 
    clear:none !important; 
 
    } 
 
} 
 

 
/*Mobile Screens*/ 
 
@media only screen and (max-width:600px) { 
 
    .main-nav { 
 
    display:none !important; 
 
    } 
 
}

<body> 
 
    <div class="main-nav"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Page01</a></li> 
 
     <li><a href="#">Page02</a></li> 
 
     <li><a href="#">Page03</a></li> 
 
     <li><a href="#">Page04</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="header"> 
 
     <img src="http://res.cloudinary.com/dgvvgqr2q/image/upload/v1456519063/5D4487FB-D2A2-4A96-8113-C671577B1DC1-header_tojssi.jpg" /> 
 
    </div> 
 
    </div> 
 
</body>

如果你想围绕我的代码玩，我有一个CodePen这里... http://codepen.io/amobley1108/pen/JXPmpL

来源

2016-02-26 Adam Mobley

是你需要什么？ http://codepen.io/Microsmsm/pen/GZRZWw?editors=0100 – Microsmsm

希望有所帮助。我没有推翻CSS样式的粉丝，所以我把大部分的资产净值转换成另一种mediaquery> 800像素

body { 
 
    border:none; 
 
    font-family:arial,helvetica,sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    margin:auto; 
 
    max-width:1000px; 
 
} 
 

 
.main-nav { 
 
    background-color:#004d99; 
 
    color:#ffffff; 
 
} 
 

 
.main-nav ul { 
 
    list-style-type:none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main-nav li a { 
 
    color:#ffffff; 
 
    display:block; 
 
    line-height: 40px; 
 
    padding: 0 10px; 
 
    text-decoration:none; 
 
} 
 

 
.main-nav li:hover { 
 
    background-color:#0073E5; 
 
} 
 

 
.header { 
 
    height:auto; 
 
    width:100%; 
 
} 
 

 
.header img { 
 
    width:100%; 
 
} 
 

 
/*Desktop Screens*/ 
 
@media only screen and (min-width:800px) { 
 
    .main-nav { 
 
    height:40px; 
 
    } 
 

 
    .main-nav ul { 
 
    float:right; 
 
    } 
 

 
    .main-nav li a { 
 
    color:#ffffff; 
 
    display:block; 
 
    line-height: 40px; 
 
    padding: 0 10px; 
 
    text-decoration:none; 
 
    } 
 

 
    .main-nav li { 
 
    float:left; 
 
    } 
 
} 
 
/*Tablet Screens*/ 
 
@media only screen and (min-width:600px) and (max-width:800px) { 
 
    .main-nav { 
 
    float: left; 
 
    min-height: 100vh; 
 
    width:200px; 
 
    } 
 
    
 
    .content { 
 
    float:right; 
 
    width: calc(100% - 200px) 
 
    } 
 
} 
 

 
/*Mobile Screens*/ 
 
@media only screen and (max-width:600px) { 
 
    .main-nav { 
 
     display:none; 
 
    } 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="main-nav"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Page01</a></li> 
 
     <li><a href="#">Page02</a></li> 
 
     <li><a href="#">Page03</a></li> 
 
     <li><a href="#">Page04</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="header"> 
 
     <img src="http://res.cloudinary.com/dgvvgqr2q/image/upload/v1456519063/5D4487FB-D2A2-4A96-8113-C671577B1DC1-header_tojssi.jpg" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-02-26 22:22:52 Cherrypig

响应式导航菜单项目 - 两个div彼此相邻

回答

相关问题