6
Ich habe folgendes Menü, das richtig funktioniert. Alles, was ich brauche, ist, dass, sobald ein Objekt ausgewählt oder verschoben wurde, sein gesamter Bereich in allen Bildschirmgrößen hervorgehoben wird. Im Moment wird nur ein Teil jedes Elements hervorgehoben.Haben Sie ein Problem mit dem Design-Menü
-Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.container-menu {
width: 100%;
background: none repeat scroll 0 0 rgb(0,0,0);
min-height: 63px;
}
.menu-items {
max-width: 1130px;
width: 100%;
height: 100%;
margin: 0 auto; //
text-align: center;
text-align: left;
position: relative;
padding-top: 36px;
text-align: center;
}
.menu-items li {
background-color: rgb(0,0,0);
}
.menu-items #home {
background-color: green;
}
.menu-items {
position: relative;
}
.menu-items a {
color: #fff;
}
.menu-items ul {
padding: 0;
list-style: none;
margin: 0;
}
.menu-items li {
display: inline;
border-left: 1px solid #fff;
}
.menu-items li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
position: absolute;
top: 7px;
right: 7px;
display: none;
}
.menu-items li:hover {
background-color: green;
}
@media only screen and (max-width: 720px) {
.burger {
display: block;
}
.menu-items ul {
display: none;
}
.menu-items li {
display: block;
border: 0;
}
.container-menu>img {
display: none;
}
}
@media (min-width :1500px) {
.menu-items li {
padding: 8px 38px;
}
}
@media (min-width : 979px) and (max-width:1500px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
}
@media (min-width : 768px) and (max-width: 979px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
.item {
height: 186px !important;
}
}
@media (max-width : 767px) {
.container-menu {
min-height: 63px;
}
.menu-items li {
border-left: 1px solid #fff;
padding: 8px 12px;
}
}
@media (max-width : 480px) {
.container-menu {
min-height: 48px;
}
.menu-top-center {
width: 100%;
}
.menu-top-right {
padding-bottom: 4px;
}
}
</style>
</head>
<body>
<header>
<div class="container-menu">
<div class="menu-items">
<ul id="">
<li id="home"><a href="#"><i class="fa fa-home f24"></i>
Home</a></li>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="mitem3"><a href="#">Item 3</a></li>
<li id="item4"><a href="#">Item 4</a></li>
<li id="item5"><a href="#">Item 5</a></li>
<li id="item6"><a href="#">Item 6</a></li>
<li id="item7"><a href="#">Item 7</a></li>
</ul>
<div class="burger hidden-md">
<i class="fa fa-align-justify fa-2x"></i>
</div>
</div>
</div>
</header>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.burger').click(function() {
$('.menu-items ul').toggleClass("visible");
});
});
</script>
</body>
</html>
Negative Stimme ohne jede Erklärung ist schrecklich wissen Sie das? : D – Jack
1. Keine Ahnung welches Bild. Das Ändern des Bildes konnte andere Gegenstände nicht ändern. 2. Alle Artikel gleiche Breite 3. .menuitems ul li {Breite: 200px} funktioniert gut. – Justinas
kann nicht in der Lage, Ihre Ausgabe zu visualisieren, fügen Sie bitte einen Screenshot, um Ihre Ausgabe zu verstehen –