Skip to content

L
landing_pages
Commit 98127a69 by Iren
Options

add button for header

parent 3dccf1a3
Showing with 131 additions and 34 deletions
css/styles.css
......@@ -119,6 +119,8 @@ header {
}
}
.header-img {
display: flex;
justify-content: space-between;
position: relative;
width: 19.6%;
margin-top: 1.8%;
......@@ -129,6 +131,12 @@ header {
width: 100%;
height: 37%;
}
@media (max-width: 576px) {
.header-img img {
width: 50%;
height: 37%;
}
}
@media (max-width: 992px) {
.header-img {
height: 80px;
......@@ -144,32 +152,64 @@ header {
}
@media (max-width: 576px) {
.header-img {
margin-top: 15px;
margin-top: 13px;
height: 92px;
width: 160px;
width: 100%;
}
}
#header-img-navicon {
position: absolute;
display: none;
}
@media (max-width: 576px) {
@media (min-width: 319px) {
#header-img-navicon {
position: relative;
/* margin-left: 103px;
margin-top: -3px;*/
display: inline-block;
font-size: 36px;
color: white;
left: 260px;
top: -15px;
}
}
@media (min-width: 576px) {
#header-img-navicon {
position: absolute;
display: none;
z-index: 0;
}
}
#cat {
position: relative;
position: absolute;
width: 80px;
height: 80px;
background: #00ccff;
left: 1px;
top: 40px;
/*@media (min-width: 320px){
display: none;
}*/
}
@media (min-width: 577px) {
#cat {
display: none;
}
}
.header-link-mobile-container {
display: flex;
}
@media (max-width: 576px) {
.header-link-mobile {
font-size: 14px;
margin-right: 20px;
}
}
@media (max-width: 480px) {
.header-link-mobile {
font-size: 10px;
margin-right: 8px;
}
}
.header-link-mobile a {
font-family: SF-UI-Display-Black;
color: white;
}
.page-header__burger--active {
display: inline-block;
display: none;
}
.header-nav {
position: relative;
......
css/styles.less
......@@ -105,6 +105,8 @@ header {
}
}
.header-img {
display: flex;
justify-content: space-between;
position: relative;
width: 19.6%;
margin-top: 1.8%;
......@@ -113,6 +115,10 @@ header {
z-index: 3;
width: 100%;
height: 37%;
@media (max-width: 576px){
width: 50%;
height: 37%;
}
}
@media (max-width: 992px) {
height: 80px;
......@@ -124,30 +130,58 @@ header {
width: 100px;
}
@media (max-width: 576px) {
margin-top: 15px;
margin-top: 13px;
height: 92px;
width: 160px;
width: 100%;
}
}
#header-img-navicon {
position: absolute;
display: none;
@media (max-width: 576px){
display: inline-block;
@media (min-width: 319px){
position: relative;
/* margin-left: 103px;
margin-top: -3px;*/
display: inline-block;
font-size: 36px;
color: white;
left: 260px;
top: -15px;
}
@media (min-width: 576px){
position: absolute;
display: none;
z-index: 0;
}
}
#cat {
position: relative;
position: absolute;
width: 80px;
height: 80px;
background: #00ccff;
left: 1px;
top: 40px;
@media (min-width: 577px){
display: none;
}
/*@media (min-width: 320px){
display: none;
}*/
}
.header-link-mobile-container {
display: flex;
}
.header-link-mobile {
@media (max-width: 576px){
font-size: 14px;
margin-right: 20px;
}
@media (max-width: 480px) {
font-size: 10px;
margin-right: 8px;
}
a {
font-family: SF-UI-Display-Black;
color: white;
}
}
.page-header__burger--active {
display: inline-block;
display: none;
}
.header-nav {
position: relative;
......
index.html
......@@ -17,17 +17,32 @@
<div class="main-container">
<div class="header-container">
<div class="header-wrapp">
<!--
<div id="cat" class="page-header__burger--active">
hhh
</div>
-->
<div class="header-img">
<button type="button" id="header-img-navicon">&#9776;</button>
<!--<div id="header-img-navicon">
&#9776;
</div>-->
<div>
<img src="img/header-logo.png">
</div>
<div id="header-img-navicon">
&#9776;
</div>
<div id="cat" class="page-header__burger--active">
<ul class="header-link-mobile-container">
<li class="header-link-mobile">
<a href="#">Продукт</a>
</li>
<li class="header-link-mobile">
<a href="#">Цены</a>
</li>
<li class="header-link-mobile">
<a href="#">Контакты</a>
</li>
<li class="header-link-mobile">
<a href="#">Войти</a>
</li>
<li class="header-link-mobile">
<a href="#">Зарегистрироваться</a>
</li>
</ul>
</div>
</div>
<div class="header-nav">
<div class="header-link">
......@@ -1211,4 +1226,12 @@
});
</script>
</body>
</html>
\ No newline at end of file
</html>
$('#header-img-navicon').click(function(event) {
$('#cat').removeClass('page-header__burger--active');
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment