| Autor |
Nachricht |
Saikoro
Threadersteller
Dabei seit: 14.05.2014
Ort: -
Alter: 32
Geschlecht: 
|
Verfasst Mo 16.06.2014 14:36
Titel Menü Element bei Klick erscheinen und verschwinden lassen |
  |
|
Hallo Leute,
ich weiß leider nicht ob ich in der richtig Rubrik Poste. Es geht um ein Menü für eine Mobile Website. Das Menü sieht wie folgt aus.
| Code: | <div class="rmm">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="agentur.php">Agentur</a></li>
<li><a href="#">Kompetenzen</a>
<ul>
<li><a href="kreation.php">Kreation</a></li>
<li><a href="prepress.php">Prepress</a></li>
<li><a href="druck.php">Druck</a>
</li>
</ul>
</li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="jobs.php">Jobs</a></li>
<li><a href="service.php">Service</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div> |
So. Dort gibt es wie man sehen kann unter Kompetenzen noch Submenüs. Diese werden Momentan angezeigt sobald man das komplette Menü aufklappt. Siehe CSS Code:
| Code: | .rmm {
display: none;
position: relative;
width: 100%;
padding: 0px;
margin: 0 auto !important;
text-align: center;
line-height: 19px !important;
}
.rmm * {
-webkit-tap-highlight-color: transparent !important;
font-family: Arial;
}
.rmm a {
color: #0A316A;
text-decoration: none;
}
.rmm .rmm-main-list,
.rmm .rmm-main-list li {
margin: 0px;
padding: 0px;
}
.rmm ul {
display: block;
width: auto !important;
margin: 0 auto !important;
overflow: hidden;
list-style: none;
}
/* sublevel menu - in construction */
.rmm ul li ul,
.rmm ul li ul li,
.rmm ul li ul li a {
display: block !important;
font-size: 90%;
}
/* */
.rmm .rmm-main-list li {
display: inline;
padding: padding: 0px;
margin: 0px !important;
}
.rmm-toggled {
display: none;
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto !important;
}
.rmm-button:hover {
cursor: pointer;
}
.rmm .rmm-toggled ul {
display: none;
margin: 0px !important;
padding: 0px !important;
}
.rmm .rmm-toggled ul li {
display: block;
margin: 0 auto !important;
}
/* GRAPHITE STYLE */
.rmm.graphite .rmm-main-list li a {
display: inline-block;
padding: 8px 30px 8px 30px;
margin: 0px -3px 0px -3px;
font-size: 15px;
text-shadow: 1px 1px 1px #333333;
background-color: #444444;
border-left: 1px solid #555555;
}
.rmm.graphite .rmm-main-list li a:hover {
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
width: 95%;
min-height: 36px;
border-radius: 6px;
}
.rmm.graphite .rmm-toggled-controls {
display: block;
height: 36px;
color: white;
text-align: left;
position: relative;
border-radius: 6px;
}
.rmm.graphite .rmm-toggled-title {
position: relative;
top: 9px;
left: 15px;
font-size: 16px;
color: white;
text-shadow: 1px 1px 1px black;
}
.rmm.graphite .rmm-button {
border: 1px solid #000000;
border-radius: 6px;
display: block;
margin-left: 15px;
padding: 8px;
width: 24px;
}
.rmm.graphite .rmm-button span {
display: block;
margin-top: 4px;
height: 2px;
background: #0A316A;
width: 24px;
}
.rmm.graphite .rmm-toggled ul li a {
background-color: #FFFFFF;
display: block;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rmm.graphite .rmm-toggled ul li a:active {
background-color: #444444;
border-bottom: 1px solid #444444;
border-top: 1px solid #444444;
}
/* SAPPHIRE STYLE */
.rmm.sapphire .rmm-main-list li a {
display: inline-block;
padding: 8px 30px 8px 30px;
margin: 0px -3px 0px -3px;
font-size: 15px;
text-shadow: 1px 1px 1px #3e587b;
background-color: #537b9f;
border-left: 1px solid #3e587b;
}
.rmm.sapphire .rmm-main-list li a:hover {
background: #3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
width: 95%;
background-color: #537b9f;
min-height: 36px;
border-radius: 6px;
}
.rmm.sapphire .rmm-toggled-controls {
display: block;
height: 36px;
color: white;
text-align: left;
position: relative;
border-radius: 5px;
}
.rmm.sapphire .rmm-toggled-title {
position: relative;
top: 9px;
left: 15px;
font-size: 16px;
color: white;
text-shadow: 1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
display: block;
position: absolute;
right: 9px;
top: 7px;
width: 20px;
padding: 0px 7px 0px 7px;
border: 1px solid #3e587b;
border-radius: 3px;
}
.rmm.sapphire .rmm-button span {
display: block;
margin: 4px 0px 4px 0px;
height: 2px;
background: #0A316A;
width: 20px;
}
.rmm.sapphire .rmm-toggled ul li a {
display: block;
width: 100%;
background-color: #537698;
text-align: center;
padding: 10px 0px 10px 0px;
}
.rmm.sapphire .rmm-toggled ul li a:active {
background-color: #3c5779;
border-bottom: 1px solid #3c5779;
border-top: 1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a {
border-top: 1px solid #3c5779 !important;
}
/* MINIMAL STYLE */
.rmm.minimal a {
color: #333333;
}
.rmm.minimal a:hover {
opacity: 0.7;
}
.rmm.minimal .rmm-main-list li a {
display: inline-block;
padding: 8px 30px 8px 30px;
margin: 0px -3px 0px -3px;
font-size: 15px;
}
.rmm.minimal .rmm-toggled {
width: 95%;
min-height: 36px;
}
.rmm.minimal .rmm-toggled-controls {
display: block;
height: 36px;
color: #333333;
text-align: left;
position: relative;
}
.rmm.minimal .rmm-toggled-title {
position: relative;
top: 9px;
left: 9px;
font-size: 16px;
color: #33333;
}
.rmm.minimal .rmm-button {
display: block;
position: absolute;
right: 9px;
top: 7px;
}
.rmm.minimal .rmm-button span {
display: block;
margin: 4px 0px 4px 0px;
height: 2px;
background: #333333;
width: 25px;
}
.rmm.minimal .rmm-toggled ul li a {
display: block;
width: 100%;
text-align: center;
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #dedede;
color: #333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top: 1px solid #dedede;
}
@media only screen and (max-width: 480px) {
nav {
display: none;
}
.rmm {
display: block;
}
} |
Nun möchte ich, dass die Unterpunkte von Kompetenzen nicht zu sehen sind, wenn man das Menü aufklappt. Eigtl kein Problem. Der Punkt ist, dass ich jetzt auf Kompetenzen klicken möchte und dann sollen die Unterpunkte unter Kompetenzen eingeblendet werden.
Gibt es da eine einfache Methode? 
Vielen Dank
Carsten
|
|
| |
   |
 |
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst Mo 16.06.2014 16:21
Titel
|
|
|
mach den helfenden das leben leichter und benutze http://jsfiddle.net oder http://codepen.io für eine editierbare demo des problems.
wenn ich dich richtig verstehe, könntest du :target verwenden um das submenu einzublenden (für den IE brauchts ggf. einen javascript fallback).
|
|
| |
|
|
|
Anzeige
|
|
|
Saikoro
Threadersteller
Dabei seit: 14.05.2014
Ort: -
Alter: 32
Geschlecht:
|
Verfasst Mo 16.06.2014 16:45
Titel
|
|
|
| remote hat geschrieben: | mach den helfenden das leben leichter und benutze http://jsfiddle.net oder http://codepen.io für eine editierbare demo des problems.
wenn ich dich richtig verstehe, könntest du :target verwenden um das submenu einzublenden (für den IE brauchts ggf. einen javascript fallback). |
Danke für die Info. Hier die Demo 
Der Browser muss etwas kleiner gezogen werden, damit das Menü sichtbar wird.
http://jsfiddle.net/UVTN8/
Zuletzt bearbeitet von Saikoro am Mo 16.06.2014 16:46, insgesamt 2-mal bearbeitet
|
|
| |
|
|
remote
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst Mo 16.06.2014 20:10
Titel
|
|
|
da weiss ich gar nicht so recht wo ich anfangen soll - das ist ein ziemlicher käse.
ich würde dir empfehlen das css soweit zu säubern, dass du vollständig auf !important verzichten kannst. vorher braucht man da gar nicht weiter dran herumfrickeln.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Div Element bei bestimmter Fensterbreite verschwinden lassen
JS - ein Element soll verschwinden, wenn ein anderes scrollt
Scrollbares Menü im Div springt nach klick
dropdown menü einklappen nach klick durch aktualisieren?
über css ein Element nach definiertem Element ansprechen
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
|
|
Willkommen auf dem Portal für Mediengestalter
