1
Я пытаюсь получить следующее меню, чтобы использовать мобильный телефон, но, похоже, не может заставить его работать. Он работает на рабочем столе, но я не уверен, как его адаптировать, чтобы он работал, когда я нажимаю значок меню на мобильном устройстве. Не уверен, что это можно сделать только с помощью css, или если требуется javascript.Меню на мобильном телефоне
/* Body Styles */
body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
header.dark blockquote {
color: #fff;
}
header.light blockquote {
color: #000;
}
blockquote {
max-width: 1000px;
margin: 0 auto;
font-size: 16px;
border-left: 0px;
padding: 20px;
}
blockquote h2 {
padding-right: 40px;
margin: 0px;
}
header.dark blockquote a {
color: orange;
text-decoration: underline;
}
header.light blockquote a {
text-decoration: underline;
}
header {
min-height: 450px;
}
header.dark {
background-color: #444;
}
header.light {
background-color: #fff;
}
/* Navigation Styles */
nav {
position: relative;
}
header.dark nav {
background-color: rgba(255, 255, 255, 0.5);
}
header.light nav {
background-color: rgba(0, 0, 0, 0.5);
}
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav > li {
display: inline-block;
padding: 0;
}
ul.main-nav > li > a {
display: block;
padding: 20px 30px;
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav > li:hover {
background-color: #f9f9f9;
}
ul.main-nav > li:hover > a {
color: #333;
font-weight: 400;
}
ul.main-nav > li ul.sub-menu-lists {
margin: 0px;
padding: 0px;
list-style-type: none;
display: block;
}
ul.main-nav > li ul.sub-menu-lists > li {
padding: 2px 0;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
font-size: 14px;
}
.ic {
position: fixed;
cursor: pointer;
display: inline-block;
right: 25px;
width: 32px;
height: 24px;
text-align: center;
top: 0px;
outline: none;
}
.ic.close {
opacity: 0;
font-size: 0px;
font-weight: 300;
color: #fff;
top: 8px;
height: 40px;
display: block;
outline: none;
}
/* Menu Icons for Devices*/
.ic.menu {
top: 25px;
z-index: 20;
}
.ic.menu .line {
height: 4px;
width: 100%;
display: block;
margin-bottom: 6px;
}
.ic.menu .line-last-child {
margin-bottom: 0px;
}
.sub-menu-head {
margin: 10px 0;
}
.banners-area {
margin-top: 20px;
padding-top: 15px;
}
@media only screen and (max-width:768px) {
.sub-menu-head {
color: orange;
}
.ic.menu {
display: block;
}
header.dark .ic.menu .line {
background-color: #fff;
}
header.light .ic.menu .line {
background-color: #000;
}
.ic.menu .line {
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
.ic.menu:focus .line {
background-color: #fff !important;
}
.ic.menu:focus .line:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ic.menu:focus .line:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: -10px;
}
.ic.menu:focus .line:nth-child(3) {
transform: translateY(15px);
opacity: 0;
}
.ic.menu:focus {
outline: none;
}
.ic.menu:focus ~ .ic.close {
opacity: 1;
z-index: 21;
outline: none;
}
/*
.ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; }
.ic.close:focus { opacity: 0; }
*/
.ic.menu:focus {
opacity: 1;
}
nav {
background-color: transparent;
}
/* Main Menu for Handheld Devices */
ul.main-nav {
z-index: 2;
padding: 50px 0;
position: fixed;
right: 0px;
top: 0px;
width: 0px;
background-color: rgba(0, 0, 0, 1);
height: 100%;
overflow: auto;
/*CSS animation applied : Slide from Right*/
-webkit-transition-property: background, width;
-moz-transition-property: background, width;
-o-transition-property: background, width;
transition-property: background, width;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.ic.menu:focus ~ .main-nav {
width: 300px;
background-color: rgba(0, 0, 0, 1);
}
ul.main-nav > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
.ic.menu:focus ~ .main-nav > * {
opacity: 1;
}
ul.main-nav > li > a:after {
display: none;
}
ul.main-nav > li:first-child {
border-radius: 0px;
}
ul.main-nav > li {
display: block;
border-bottom: 1px solid #444;
}
ul.main-nav > li > a {
font-weight: 600;
}
ul.main-nav > li ul.sub-menu-lists > li a {
color: #eee;
font-size: 14px;
}
.sub-menu-head {
font-size: 16px;
}
ul.main-nav > li:hover {
background-color: transparent;
}
ul.main-nav > li:hover > a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
position: relative;
visibility: visible;
opacity: 1.0;
}
.sub-menu-block {
padding: 0 30px;
}
.banners-area {
padding-bottom: 0px;
}
.banners-area div {
margin-bottom: 15px;
}
.banners-area {
border-top: 1px solid #444;
}
}
@media only screen and (min-width:769px) {
.ic.menu {
display: none;
}
/* Main Menu for Desktop Devices */
ul.main-nav {
display: block;
position: relative;
}
.sub-menu-block {
padding: 15px;
}
/* Sub Menu */
ul.main-nav > li > div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index: 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav > li:hover > div.sub-menu-block {
background-color: #f9f9f9;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav > li:hover > div.sub-menu-block > * {
opacity: 1;
}
.sub-menu-head {
font-size: 20px;
}
/* List Separator: Outer Border */
header.dark ul.main-nav > li > a {
border-right: 1px solid #bbb;
}
header.light ul.main-nav > li > a {
border-right: 1px solid #666;
}
/* List Separator: Inner Border */
ul.main-nav > li > a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
header.dark ul.main-nav > li > a:after {
background-color: #777;
}
header.light ul.main-nav > li > a:after {
background-color: #999;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a.mega-menu > span {
display: block;
vertical-align: middle;
}
ul.main-nav > li > a.mega-menu > span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav > li:hover > a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
.banners-area {
border-top: 1px solid #ccc;
}
}<!-- Available in two variations: "light" and "dark" | Change <header> class to see impact. -->
<header class="dark">
<nav role="navigation">
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<a href="javascript:void(0);" class="ic close"></a>
<ul class="main-nav">
<li class="top-level-link">
<a><span>Home</span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>Products</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Clothing</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>New Born</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Handbags</h2>
<ul class="sub-menu-lists">
<li><a>Wallets</a></li>
<li><a>Athletic bag</a></li>
<li><a>Backpack</a></li>
<li><a>Bucket Bag</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Shoes</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>View All</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Services<span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>About</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Company</h2>
<ul class="sub-menu-lists">
<li><a>About</a></li>
<li><a>Mission</a></li>
<li><a>Community</a></li>
<li><a>Team</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Media</h2>
<ul class="sub-menu-lists">
<li><a>News</a></li>
<li><a>Events</a></li>
<li><a>Blog</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Careers</h2>
<ul class="sub-menu-lists">
<li><a>New Opportunities</a></li>
<li><a>Life @ Company</a></li>
<li><a>Why Join Us?</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Contact</span></a>
</li>
</ul>
</nav>
</header>
Не работает, когда я добавляю курсор в меню. – sarkism
, может быть, попробуйте добавить курсор к ссылке li.top-level? – erica
Не работает, даже добавление курсора ко всему телу, похоже, не работает. – sarkism