#jquery #css #angular #twitter-bootstrap
#jquery #css #угловой #twitter-bootstrap
Вопрос:
Я создал мега-меню, которое работает нормально, но когда я использую его перед своей каруселью, я обнаружил неожиданный результат. Мега-меню открывается под каруселью.
Вот мой код карусели: carousel.component.html
<div class="container mt-5">
<mdb-carousel [animation]="'slide'">
<mdb-carousel-item>
<img class="d-block w-100 h-20" src="./assets/Images/2(a).PNG" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100 " src="./assets/Images/2(b).PNG" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img (70).jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
</div>
<router-outlet></router-outlet>
Вот мой код megamenu: home.component.html
<style>
body{
margin: 0;
padding: 0;
font: 300 14px/18px Roboto;
background-image: url('../images/texture.png');
}
*,
:after,
:before {
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
ul{
list-style:none;
margin: 0;
padding: 0;
}
a, a:hover, a.active, a:active, a:visited, a:focus{
color:#fefefe;
text-decoration:none;
}
.content{
padding:0px;
}
.exo-menu{
width: 100%;
float: left;
list-style: none;
position:relative;
background: #2d2d2d;
}
.exo-menu > li { display: inline-block;}
.exo-menu > li > a{
color: #ccc;
text-decoration: none;
text-transform: uppercase;
border-right: 1px #365670 dotted;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{
background:#009FE1;
color:#fff;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left{position:relative;}
li.drop-down:before {
content: "f103";
color: #ffffff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul{
left: 0px;
min-width: 230px;
}
.drop-down-ul{display:none;}
.flyout-right>ul,
.flyout-left>ul{
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down>ul>li>a,
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #2d2d2d;
border-bottom: 1px dotted#2d2d2d;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
border-bottom: 1px dotted #B8C7BC;
}
/*Flyout Mega*/
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display:none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color:#eee;
margin-top: 0px;
font-size: 14px;
padding-left: 15px;
padding-bottom: 13px;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
}
.flyout-mega ul > li > a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus{
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
/*mega menu*/
.mega-menu {
left: 0;
right: 0;
padding: 10px;
display:none;
padding-top: 0;
min-height: 100%;
}
h4.row.mega-title {
color: #eee;
margin-top: 0px;
font-size: 14px;
padding-left: 15px;
padding-bottom: 13px;
text-transform: uppercase;
border-bottom: 1px solid #2d2d2d;
padding-top: 15px;
background-color: #2d2d2d;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 90%;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more{
border-radius: 1px;
margin-top:15px;
background-color: #2d2d2d;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover{
color:#fff;
background:#2d2d2d;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #2d2d2d;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog{
left:0;
display:none;
color:#fefefe;
padding-top:15px;
background:#2d2d2d;
padding-bottom:15px;
}
.Blog .blog-title{
color:#fff;
font-size:15px;
text-transform:uppercase;
}
.Blog .blog-des{
color:#ccc;
font-size:90%;
margin-top:15px;
}
.Blog a.view-more{
margin-top:0px;
}
/*Images*/
.Images{
left:0;
width:100%;
display:none;
color:#fefefe;
padding-top:15px;
background:#2d2d2d;
padding-bottom:15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a ,
.flyout-left ul>li>a,
.flyout-mega-wrap,
.mega-menu{
background-color: #2d2d2d;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover ul,
li.flyout-right a:hover ul,
.blog-drop-down >a:hover .Blog,
li.drop-down>a:hover .drop-down-ul,
.images-drop-down>a:hover .Images,
.mega-drop-down a:hover .mega-menu,
li.flyout-mega>a:hover .flyout-mega-wrap{
display:block;
}
/*responsive*/
@media (min-width:767px){
.exo-menu > li > a{
display:block;
padding: 20px 22px;
}
.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
position:absolute;
}
.flyout-right>ul{
left: 100%;
}
.flyout-left>ul{
right: 100%;
}
}
@media (max-width:767px){
.exo-menu {
min-height: 58px;
background-color: #2d2d2d;
width: 100%;
}
.exo-menu > li > a{
width:100% ;
display:none ;
}
.exo-menu > li{
width:100%;
}
.display.exo-menu > li > a{
display:block ;
padding: 20px 22px;
}
.mega-menu, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
position:relative;
}
}
a.toggle-menu{
position: absolute;
right: 0px;
padding: 20px;
font-size: 27px;
background-color: #ccc;
color: #2d2d2d;
top: 0px;
}
</style>
<div class="container" style="height: 160px;">
<p style="float:right" class="text-danger mt-4"><a> FREE SHIPPING IN NORTH AMERICA ON ORDERS $150 </a></p><br/>
<h1 style="color: #000000;max-width: 100%; height: auto;vertical-align: middle;font-size: 2.307692308em;font-weight: 400;
line-height: 1.25em;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif"><b class="display-1"><u>BIKO</u></b></h1>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="content" style="display: block;">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><u>LookBook</u></a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-4">
<h4 class="row mega-title">Feature</h4>
<img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
</div>
<div class="col-md-2">
<h4 class="row mega-title">Standers</h4>
<ul class="stander">
<li><a href="#">Mobile</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">laptop</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">I pad</a></li>
<li><a class="view-more btn- btn-sm" href="#">View more</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Description</h4>
<ul class="description">
<li><a href="#">Women</a>
<span>Description of Women</span>
</li>
<li><a href="#">Men</a>
<span>Description of men Cloths</span>
</li>
<li><a href="#">Kids</a>
<span>Description of Kids Cloths</span>
</li>
<li><a href="#">Others</a>
<span>Description of Others Cloths</span>
</li>
<li>
<a class="view-more btn btn-sm " href="#">View more</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Icon Description</h4>
<ul class="icon-des">
<li><a href="#"><i class="fa fa-globe"></i>Web</a></li>
<li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li>
<li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li>
<li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li>
<li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a class="" href="#"><u>PRESS</u></a></li>
<li class=""><a href="#"><u>ABOUT</u></a>
</li>
<li class="mega-drop-down"><a href="#"><u>Shop</u></a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-4">
<h4 class="row mega-title">Feature</h4>
<img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
</div>
<div class="col-md-2">
<h4 class="row mega-title">Standers</h4>
<ul class="stander">
<li><a href="#">Mobile</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">laptop</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">I pad</a></li>
<li><a class="view-more btn- btn-sm" href="#">View more</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Description</h4>
<ul class="description">
<li><a href="#">Women</a>
<span>Description of Women</span>
</li>
<li><a href="#">Men</a>
<span>Description of men Cloths</span>
</li>
<li><a href="#">Kids</a>
<span>Description of Kids Cloths</span>
</li>
<li><a href="#">Others</a>
<span>Description of Others Cloths</span>
</li>
<li>
<a class="view-more btn btn-sm " href="#">View more</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Icon Description</h4>
<ul class="icon-des">
<li><a href="#"><i class="fa fa-globe"></i>Web</a></li>
<li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li>
<li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li>
<li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li>
<li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$(function () {
$('.toggle-menu').click(function(){
$('.exo-menu').toggleClass('display');
});
});
</script>
<router-outlet></router-outlet>
Вот мой неожиданный результат :
Как я могу показать свой слайд мега-меню над слайдером изображения карусели.
Комментарии:
1. Не могли бы вы добавить это в пример stackblitz, пожалуйста? Вам будет легче помочь
2. Или jsfiddle.net ? У вас много жестко закодированных полей и отступов. Это делает практически невозможным выполнение этой работы во всех браузерах и устройствах.
Ответ №1:
Просто добавьте z-index:100000 !important; внутри .exo-menu , как указано ниже:-
.exo-menu{
z-index:100000 !important;
} Я надеюсь, что это сработает…