Отзывчивый проект меню Nav - два divs рядом друг с другом

Я работаю над проектом, чтобы создать отзывчивое Nav Menu. Моя цель прямо сейчас состоит в том, чтобы переключатель Nav Menu отображался сверху, чтобы отображать на стороне планшетные устройства (экраны шириной 800 пикселей).Отзывчивый проект меню Nav - два divs рядом друг с другом

В моем запросе на медиа я вернусь назад к вертикальному выравниванию, установив float: initial; и установили float: left; для main-nav div и float: right; для содержимого div. Однако по какой-то причине содержимое 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> 800px

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

Отзывчивый проект меню Nav - два divs рядом друг с другом

ответ

Смежные вопросы