• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menu beim anzeigen über den ganzen bildschrim anzeigen lassen

htmler222

htmler222

Neues Mitglied
Moin Freunde,
ich will gerade meine Website umschreiben weil die Ansicht auf kleineren Bildschirmen einfach mies ist. Jetzt hab ich ein ausklappbares Menu (Mobile Menu) und möchte das man es wenn man auf Menu klickt und sich das ausklappt allen anderen Content der Seite komplett verdeckt. Und man es mit nem Schließen button wieder einklappen kann. Dabei soll es egal sein welche breite der Bildschirm hat. Das menu soll sich anpassen.:wink: Oder noch besser (da bin ich mir aber nicht sicher ob das geht :wink: )es soll sich nach einem Klick auf irgend eine Rubrik einklappen weil wie ihr seht sind einege mit "#..." verlinkt. Also auf der Seite deswegen wäre das einklappen des menus nach dem klick ja nicht schlecht. Könnte mir da einer Helfen?
hier der Code
Code: 
  <input type="checkbox" id="off-canvas-menu">
   <label for="off-canvas-menu" class="off-canvas-menu-label"><p><font size="3"><font color=" #9E9E9E">Menu</p></label></font></font>

  <nav class="off-canvas-menu">
    <ul>
     <li><a href="#Musik" title="Musik ">Musik Sozaile Medien und Merchandise</a></li>
      <li class="sub">
        <input type="checkbox" />
        <a href="#" title="Sprachen">Sprachen</a>
        <ul class="submenu">
          <li class="sub">
            <input type="checkbox" />
            <a href="#RFL.php" title="Sprachen">In diesen Sprachen gibt es die Seite</a>
            <ul class="submenu">
               <li><a href="RFL.php" title="Deutsch">Deutsch</a></li>
              <li><a href="RFL_Englisch.php" title="Englisch">Englisch</a></li>
            </ul>
          </li>
          <li class="sub">
            <input type="checkbox" />
            <a href="#Newsletter">Newsletter</a>
            <ul class="submenu">
              <li><a href="#News" title="News">Was gbt's Neues</a></li>
              <li><a href="#Newsletter" title="Im Newsletter eintragen">Im Newsletter eintragen</a></li>
              <li><a href="Login.htm" title="Im Newsletter einlooggen">Im Newsletter einloggen</a></li>
              <li class="sub">
                <input type="checkbox" />
                <a href="#" title="">Was gibt es sonst noch?</a>
                <ul class="submenu">
                  <li><a href="#Videos" title="Musik ">Videos</a></li>
                  <li><a href="#Links" title="Links">Links</a></li>
                  <li><a href="#Bilder" title="Bilder ">Bilder</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#ueber" title="Das bin ich">Ãœber RFL</a></li>
      <li><a href="#Kontakt" title="Kontakt">Kontakt</a></li>
<li><a href="Konzertsuche.php" title="Konzertsuche ">Konzertsuche</a></li>
      <li><a href="#Impressum" title="Rechtliches">Impressum</a></li>
<li><a href="https://www.facebook.com/RFLofficail/" title="Facebook">Facebook</a></li>
      <li><a href="https://twitter.com/RFL19515927" title="Twitter">Twitter</a></li>
      <li><a href="https://www.instagram.com/rfl_music/" title="Instagram">Instagram</a></li>
    </ul>
  </nav>
wenn euch das an code nicht reicht sagt es gerne dann kommt der CSS code hinterher. Aber ich denk ihr wisst was ich möchte ;) Gruß
 
Zuletzt bearbeitet:
Das Ding ist ich habe das Menü erstellt und es lässt sich wunderbar ausklappen. Haken tut es bei mir daran daß nur über 1/4 des Bildschirms geht ich es aber über den ganzen Bildschirm haben will. ebenfalls hakt es daran daß es sich es wenn ich den Bildschirm verkleiner nicht der breite anpasst und sich nicht nach Klick auf eine Rubrik einklappt. Das schliesseniessen des Menüs mit einem schliessen Button klappt aber.
 
CSS fehlt! Ich werde dir im übrigen trotzdem keinen eigenen Code schreiben. Aber Denkanstöße helfen i.d.R. schon und haben auch einen viel größeren Lerneffekt.
 
Code: 
<style type="text/css">
#hyperlinks {
    border: 3px dashed #F00;
    padding: 10px;
        position: right;
        right: 1em;
        top: 0;
        width: 250px;
     }
input
 {
   font-size: 1.0em;
   border: 1px solid gainsboro;
   color: teal;
   font-family: inherit;
   font-weight:100;
}
h1{ color:white }
h1 {border-color:white;
border-width:5px;
border-style:groove;}
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000;  border-bottom:solid 0px white;  }
.btn {
  background: #000000;
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -ms-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(to bottom, #000000, #000000);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 2px 2px 4px #ffffff;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #FF00FF;
  background-image: -webkit-linear-gradient(top, #FF00FF, #FF00FF);
  background-image: -moz-linear-gradient(top, #FF00FF, #FF00FF);
  background-image: -ms-linear-gradient(top, #FF00FF, #FF00FF);
  background-image: -o-linear-gradient(top, #FF00FF, #FF00FF);
  background-image: linear-gradient(to bottom, #FF00FF, #FF00FF);
  text-decoration: none;
}

#tabelle       {background-color: #808000;}
 p{font-family:Arial; font-size:18px; color:White;}
.ma {border-color:white;
border-width:5px;
border-style:groove;}


* {
  margin: 0;
  padding: 0;
}

h1 {
  margin-bottom: 30px;
}

p {
  margin-bottom: 20px;
}

.toppi {
  position: relative;
  height: 100%;
}

.wrapper {
  position: relative;
  width: 80%;
  margin: 0 auto;
  transition: 0.5s;
}

.content {
  padding: 100px 60px 60px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

input#off-canvas-menu {
  display: none;
}

label.off-canvas-menu-label {
  position: fixed;
  width: 60px;
  height: 60px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 999;
}

label.off-canvas-menu-label i {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 24px;
  color: #fff;
  transition: 0.3s;
}

input#off-canvas-menu[type=checkbox]:checked ~ label.off-canvas-menu-label i {
  transform: rotate(90deg);
}

input#off-canvas-menu[type=checkbox]:checked ~ nav.off-canvas-menu {
  transform: translateX(0);
}

input#off-canvas-menu[type=checkbox]:checked ~ .wrapper {
  transform: translateX(300px);
}

input#off-canvas-menu[type=checkbox]:checked ~ .overlay {
  height: 100%;
  opacity: 1;
}

nav li,
label.off-canvas-menu-label {
  transition: 0.2s;
}

nav li:hover,
label.off-canvas-menu-label:hover,
input#off-canvas-menu[type=checkbox]:checked ~ label.off-canvas-menu-label {
  background: #000000 !important;
}

.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #3a3a3a;
  box-shadow: 0 0 10px rgba(0,0,0,0.9);
  z-index: 3;
}

.main-menu ul.nav-icons {
  float: right;
}

.main-menu li {
  float: left;
  line-height: 60px;
  list-style: none;
  transition: 0.3s;
}

.main-menu li a {
  display: inline-block;
}

.main-menu li i {
  width: 60px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.off-canvas-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #3a3a3a;
  font-size: 16px;
  transform: translateX(-100%);
  box-shadow: 0 0 10px rgba(0,0,0,0.9);
  transition: 0.5s;
  z-index: 2;
}

.off-canvas-menu input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
    display: block;
  cursor: pointer;
}

.off-canvas-menu ul {
  margin: 0;
  padding: 0;
}

.off-canvas-menu > ul {
  margin-top: 60px;
}

.off-canvas-menu a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
}

.off-canvas-menu li {
  position: relative;
  float: left;
  width: 100%;
  list-style: none;
  color: #fff;
  transition: 0.5s;
  border-top: 1px solid #555;
}

.off-canvas-menu > ul > li:last-child {
  border-bottom: 1px solid #555;
}

.off-canvas-menu ul li:first-child {
  border-top: none;
}

.off-canvas-menu ul > li.sub > a:after {
  position: relative;
  float: right;
  content: '+';
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  vertical-align: middle;
  transition: 0.5s;
}

.off-canvas-menu .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  border-top: none;
}

.off-canvas-menu input[type=checkbox]:checked ~ .submenu {
  border-top: 1px solid #555;
  max-height: 999px;
}

.off-canvas-menu input[type=checkbox]:checked ~ a:after {
  transform: rotate(45deg);
}

.off-canvas-menu .submenu li {
  background: #333;
}

.off-canvas-menu .submenu li a {
  padding-left: 30px;
}

.off-canvas-menu .submenu li li a {
  padding-left: 35px;
}

.off-canvas-menu .submenu li li li a {
  padding-left: 40px;
}

.off-canvas-menu .submenu li.sub {
  list-style: none;
}
#toggle label {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 3.5em;
}

#toggle input {
  display: none;
}

#toggle .slider { /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: 1.5em;
  left: 2em;
  width: 4em;
  height: 2em;
  background-color: #c32e04; /* red */
  border-radius: 1em;
  transition: all .3s ease-in-out;
}

#toggle .slider::before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}
 td          { border: 0px solid; }
      #spaltengruppe { width: 0px; }

</style>
hätte dir gerne nur den code für das menu rauskopiert aber hat er nicht gemacht hoffe du kannst mit dem css was anfangen ;)
 
htmler222 schrieb:
Das Ding ist ich habe das Menü erstellt und es lässt sich wunderbar ausklappen. Haken tut es bei mir daran daß nur über 1/4 des Bildschirms geht ich es aber über den ganzen Bildschirm haben will.
Zum Vergrößern anklicken....
Ähm... dann setze doch mal die Breite auf 100% und nicht auf 300px.

htmler222 schrieb:
ebenfalls hakt es daran daß es sich es wenn ich den Bildschirm verkleiner nicht der breite anpasst
Zum Vergrößern anklicken....
Ja ne, du hast ja auch einen festen Pixelwert angegeben. Wie gesagt: 100%.

htmler222 schrieb:
und sich nicht nach Klick auf eine Rubrik einklappt. Das schliesseniessen des Menüs mit einem schliessen Button klappt aber.
Zum Vergrößern anklicken....
Logisch, warum sollte es sich auch einklappen? Du hast hier einen äußerst schlechten Ansatz gewählt. Du legst einfach nur eine checkbox mit opacity: 0; darüber und schaust, ob sie angeklickt wurde. Sowas macht man mit JS. Dann würde nämlich auch das einklappen nach einem klick sehr einfach sein.

Beispiel:
Du erstellst eine Klasse, die die Animation triggert und das Menü öffnet. Das Menü hat die Klasse nicht von Anfang an. Stattdessen setzt du einen event-listener, der bei click auf den Menü-Button die Klasse triggert. Das triggern ist wichtig, da sich die Klasse bei erneutem Klick einfach wieder entfernt.
Wenn jetzt ein Menüpunkt angeklickt wird, triggerst du die Klasse ebenfalls und das Menü wird geschlossen.
Ohne JS wird das nichts.
 
Also ich hab die Breite auf 100% in der zeile wo 300 px stand läuft . Und was deinen ansatz mit Js angeht... Sry aber ich versteh nix von js deswegen hab ich ja uch nur css gewählt hoffe du kommst mit der info irgendwie weiter ;) und jetzt gehts halt ans generelle site umgestalten aber wie gesagt von js hab ich 0 plan
 
Zuletzt bearbeitet:
htmler222 schrieb:
Und was deinen ansatz mit Js angeht... Sry aber ich versteh nix von js deswegen hab ich ja uch nur css gewählt
Zum Vergrößern anklicken....
Hab ich mir gedacht. Ein Fehler, den ich früher auch mal gemacht habe. Ich kann dir aber eins sagen: JavaScript ist absolut essentiell, besonders wenn es später Richtung libraries (z.B. JQuery), Frameworks (wie Angular, VueJS, etc.) geht. Es macht also Sinn, sich auf jeden Fall mit JavaScript zu beschäftigen. Man muss die Sprache in seiner Grundform nicht einmal meistern, das wäre deutlich zu umständlich. Wie gesagt, da kommen da libraries ins Spiel.
Also tue dir den Gefallen und fange damit an.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben