0
Ich möchte Dropdown-Liste erstellen, ohne Banner Bild zu erweitern. Ich möchte Dropdown-Bild neben der Kopfzeile für Meadiaquery anzeigen. Jetzt Problem bei der Positionierungdropmenu Überlauf ohne Erweiterung Banner Bild
$(document).ready(function(){
$(".mobileMenuImg").click(function(){
$(".MobileItem").slideToggle();
});
});/*banner*/
.banner{
\t background-image: url("../image/banner-image.jpg");
\t background-repeat:no-repeat;
\t background-size:100% 100%;
\t text-align: center;
}
.banner-heading{
\t margin-top:25px;
\t font: bold 31px roboto !important;
color:#fff;
\t width:auto;
\t text-align:center;
\t
}
.banner-content{
\t
\t font: bold 50px roboto !important;
color:#fff; width:auto;
\t
\t text-align:center;
}
.banner-heading span,.banner-content span{
\t background-color:#99408c;
\t padding:0 10px;
}
.image-banner p{
\t font: bold 20px roboto !important;
}
/*banner menu*/
.header{
\t background-color:black;
\t opacity:.7;
\t padding:0;
\t margin:0;
\t width:100%;
\t margin-bottom: 26px ;
\t z-index:1000;
\t
}
.logoImg img{
/*margin:10px 0 10px 0; \t */
float:right;
z-index:999;
}
.menu-item{margin:0;}
.menu{
\t margin-top:10px;
}
.menu ul{
\t list-style-type:none;
\t float: left;
\t width: 100%;
\t padding:0;
}
.menu ul li{
\t display:inline-block;
\t padding: 1% 8% 0 0%;
}
.menu ul li img{
margin-bottom: 20px;
}
.menu ul li a{
\t padding:2% 5%;
\t font:bold 15px roboto !important;
\t color:#ffffff;
}
.menu ul li a:hover{
\t color:#ffffff;
\t text-decoration:none;
\t cursor:pointer;
}
.mobileMenu{
\t display:none;
}
.MobileItem{
\t \t display:none;
\t \t background:black;
\t \t opacity:0.7;
\t }
.MobileItem ul{
\t \t list-style-type:none;
\t \t margin-top:2%;
\t }
\t .mobileMenu-item li{
\t \t text-align:left;
\t }
\t .mobileMenu-item li img{
\t \t padding-right:2%;
\t }
\t .mobileMenu-item li a{
\t \t color:#ffffff;
\t }
\t .mobileMenu-item li a:hover{
\t \t color:#ffffff;
\t \t text-decoration:none;
\t \t cursor:pointer;
\t }
\t
/*End of banner menu*/
/*banner process icon*/
.banner-icon img{
margin: 0% auto;
}
.image-banner,.image-bannerArrow{
\t display:inline-block;
}
.image-banner{
\t margin:5% 0 7% 0;
}
.image-banner p{
\t margin-top:9%;
}
.image-bannerArrow{
\t margin:9% 0 0% 0;
}
.image-banner p{
\t color:#ffffff;
\t font:bold 18px roboto !important;
\t
}
/*End of banner process icon*/
/*order button*/
.orderButton{
\t box-shadow:inset 0px 1px 0px 0px #ffa200;
\t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
\t background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
\t background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
\t background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
\t background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
\t background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
\t background-color:#ffa200;
\t border:1px solid #ffa200;
\t display:inline-block;
\t font:bold 30px roboto !important;
\t margin: 0px auto;
\t margin-bottom:5%; \t
\t cursor:pointer;
\t color:#ffffff;
\t padding:.5% 3%;
}
/*End of order button*/
\t
/*End of banner*/ \t
@media (min-width:250px) and (max-width:450px)
{
\t .logoImg img{
\t \t float:none;
\t \t padding:2% 1%;
\t }
\t .menu{
\t \t display:none
\t }
\t .mobileMenu{
\t \t display:block;
\t }
\t
\t .mobileMenu img{
\t \t max-width:50px;
\t \t float:right;
\t \t padding:2% 3% 2% 0;
\t \t
\t }
\t .image-banner p{
\t color:#ffffff;
\t font:bold 10px roboto !important;
\t }
\t .banner-heading{
\t \t font: bold 15px roboto !important;
\t }
\t .banner-content{
\t font: bold 15px roboto !important;
}
\t .orderButton{
\t font:bold 18px roboto !important;
\t
\t }
\t .image-banner{
\t margin:0;
}
.image-bannerArrow{
\t
\t margin:0;
\t padding:0;
}
}
@media (min-width:451px) and (max-width:950px) {
\t .logoImg img{
\t \t float:none;
\t \t padding:2% 1%;
\t }
\t .menu{
\t \t display:none
\t }
\t .mobileMenu{
\t \t display:block;
\t }
\t .mobileMenu img{
\t \t max-width:50px;
\t \t float:right;
\t \t padding:6% 3% 2% 0;
\t \t padding:0;
\t \t
\t }
\t
\t .image-banner p{
\t color:#ffffff;
\t font:bold 14px roboto !important;
\t }
\t .banner-heading{
\t \t font: bold 20px roboto !important;
\t }
\t .banner-content{
\t font: bold 22px roboto !important;
}
\t .orderButton{
\t \t font: bold 20px roboto !important;
\t }
\t .image-banner{
\t margin:0;
\t
}
}
@media (min-width:951px){
\t .MobileItem{
\t \t display:none !important;
\t }
\t
}
@media (min-width:250px)and (max-width:390px)
{
\t .MobileItem{
\t \t position:absolute;
\t \t z-index:999;
\t top:52px;
\t \t
\t }
}
@media (min-width:391px)and (max-width:500px)
{
\t .MobileItem{
\t \t position:relative !important;
\t \t z-index:999;
\t top: 0px;
\t \t
\t }
\t .MobileItem ul{
\t \t margin-top:5%;
\t }
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row banner">
\t <!-- <div class="col-md-12 col-sm-12 col-xs-12">-->
\t \t <div class="col-md-12 col-sm-12 col-xs-12 header" >
\t \t <div class="col-md-3 col-sm-3 col-xs-5 logoImg" >
<img src="image/gama-logo.png" alt="logo" class="img-responsive "> \t \t
\t \t \t </div>
\t \t \t <div class="col-md-9 col-sm-9 menu" >
\t \t \t <ul class="menu-item">
\t \t \t \t <li><a><img src="image/menu-icon.png" alt=""><p>Menu</p></a></li>
\t \t \t \t <li><a><img src="image/byov.png" alt=""><p>What is BYOV?</p></a></li>
\t \t \t \t <li><a><img src="image/pickup-icon.png" alt=""><p>Pick-up Points</p></a></li>
\t \t \t \t <li><a><img src="image/catering-icon.png" alt=""><p>Catering</p></a></li>
\t \t \t \t <li><a><img src="image/outlet-icon.png" alt=""><p>Nearest Outlet</p></a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <div class="col-md-9 col-sm-9 col-xs-7 mobileMenu">
\t \t \t <img src="image/menuColapse.png" alt="MobileMenuIcon" class="img-responsive mobileMenuImg">
\t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-md-12 col-sm-12 col-xs-12 MobileItem">
\t \t \t <ul class="mobileMenu-item">
\t \t \t \t <li><a><img src="image/menu-icon.png" alt="">Menu</a></li>
\t \t \t \t <li><a><img src="image/byov.png" alt="">What is BYOV?</a></li>
\t \t \t \t <li><a><img src="image/pickup-icon.png" alt="">Pick-up Points</a></li>
\t \t \t \t <li><a><img src="image/catering-icon.png" alt="">Catering</a></li>
\t \t \t \t <li><a><img src="image/outlet-icon.png" alt="">Nearest Outlet</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <div class="col-md-12 col-sm-12 col-xs-12">
\t \t <p class="banner-heading"><spanorder</span></p>
\t \t \t <P class="banner-content"><span>STEPS </span></P>
\t \t \t </div>
\t \t \t <div class="col-md-2 col-sm-2">
\t \t \t </div>
\t \t \t <div class="col-md-8 col-sm-8 col-xs-12 banner-icon">
\t \t \t
\t \t \t <div class="col-md-3 col-sm-3 col-xs-3 image-banner" >
\t \t \t <img src="image/pickup.png" alt="pickup point location" class="img-responsive">
\t \t \t \t <p>PICK-UP POINT</p>
\t \t \t </div>
\t \t \t <div class="col-md-1 col-sm-1 col-xs-1 image-bannerArrow">
\t \t \t <img src="image/arrow.png" alt="next step" class="img-responsive">
\t \t \t \t <p></p>
\t \t \t </div> \t \t
\t \t \t <div class="col-md-3 col-sm-3 col-xs-3 image-banner">
\t \t \t <img src="image/select-food.png" alt="food selection" class="img-responsive">
\t \t \t \t <p>SELECT FOOD</p>
\t \t \t </div> \t
\t \t \t <div class="col-md-1 col-sm-1 col-xs-1 image-bannerArrow">
\t \t \t <img src="image/arrow.png" alt="next step" class="img-responsive">
\t \t \t <p>.</p>
\t \t \t </div>
\t \t \t <div class="col-md-3 col-sm-3 col-xs-3 image-banner">
\t \t \t <img src="image/pay-online.png" alt="payment process" class="img-responsive">
\t \t \t \t <p>PAY</p>
\t \t \t </div>
\t \t \t <div class=" col-xs-1">
\t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-md-2 col-sm-2">
\t \t \t </div>
\t \t \t <div class="col-md-12 col-sm-12 col-xs-12">
\t \t \t <!-- <p class="banner-button"> -->
\t \t \t <form method="post">
\t \t
\t \t <input type="submit" name="register" value="LET ME ORDER" class="orderButton">
\t \t
\t \t </form>
\t \t <!-- </p>-->
\t \t </div>
\t \t
\t \t <!-- </div> -->
\t </div>
</div>
Was genau ist dein Problem? – denchu