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

[ERLEDIGT] 2 Menüs wechseln?

Status
Für weitere Antworten geschlossen.
T

Tominator2015

Neues Mitglied
Hallo ich möchte 2 Menüs erstellen und sie je nach Größe des Bildschirmes erscheinen lassen.
Das heißt, dass ich z.b. einen großen Bildschirm hab und da zeige ich "Menü 1" an.
Wenn ich jetzt am Handy schaue soll dort "Menü 2" angezeigt werden.

PS: Die Menüs sehen unterschiedlich aus und es stehen unterschiedliche Sachen drin.

Gruß
Tom
 
Tominator2015 schrieb:
Das heißt, dass ich z.b. einen großen Bildschirm hab und da zeige ich "Menü 1" an.
Wenn ich jetzt am Handy schaue soll dort "Menü 2" angezeigt werden.

PS: Die Menüs sehen unterschiedlich aus und es stehen unterschiedliche Sachen drin.
Zum Vergrößern anklicken....
Schon mal darüber nachgedacht, dass der PC-User somit unterschiedliche Inhalte vorfindet, wenn er die Fensterbreite seines Browers skaliert?

Und was unterscheidet den Smartphone-User vom PC-User, dass der Webinhalt unter ihnen variieren soll?

Wie auch immer, hier ein paar Möglichkeiten zur technischen Umsetzung:

http://jsbin.com/amujav/1/edit?html,css,output
http://maurice-web.de/besser-als-display-none-inhalte-auf-smartphones-richtig-ausblenden/
http://codepen.io/geddesign/pen/rqDmF
http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html
 
Hallo,
Zur Erklärung. Ich hab ein Menu das in einem Bild integiert ist. Dieses Bild ist ziemlich groß.
Wenn jetzt ein kleiner Bildschirm oder ein Handy auf die Website geht sieht es naja aus. Deswegen will ich ein 2tes Menü, das nur die Links anzeigt.
 
Tominator2015 schrieb:
Zur Erklärung. Ich hab ein Menu das in einem Bild integiert ist. Dieses Bild ist ziemlich groß.
Wenn jetzt ein kleiner Bildschirm oder ein Handy auf die Website geht sieht es naja aus. Deswegen will ich ein 2tes Menü, das nur die Links anzeigt.
Zum Vergrößern anklicken....
Das liest sich eingangs aber noch anders.

Wenn nur das Bild verschwinden soll, dann display:none für <img> oder background-image:none bei einem Hintergrundbild.

Die Abfrage der Fensterbreite erfolgt mit https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Kleines Beispiel dazu: https://jsfiddle.net/spicelab/vy3xs0ra/
 
Spicelab schrieb:
Das liest sich eingangs aber noch anders.

Wenn nur das Bild verschwinden soll, dann display:none für <img> oder background-image:none bei einem Hintergrundbild.

Die Abfrage der Fensterbreite erfolgt mit https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Kleines Beispiel dazu: https://jsfiddle.net/spicelab/vy3xs0ra/
Zum Vergrößern anklicken....

Ich schick dir mal den Quellcode weil bei mir ist das ein bisschen anders. Ich nutze Bootstrap und Typo3.

HTML: 
<nav class="navbar navbar-default navbar-fixed-top" style="background-image: url(fileadmin/firmen_logo_website.PNG); height: 80px; width: 1100px; margin-left: auto;margin-top: 0; margin-right: auto; display: block;" />
<div class="container" style="color: #000000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""></a>
</div>
<div class="navbar-collapse collapse" style="margin-top: 40px; float: left;padding-bottom: 10px;">
<ul class="nav navbar-nav" style="padding-bottom: 10px;" >
<li><a href="">Home</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Und so soll es sein wenn der Bildschirm zu klein wird:
HTML: 
<nav class="navbar navbar-default navbar-fixed-top"  />
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="padding-bottom: 10px;" >
<li><a href="">Home</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
 
Zuletzt bearbeitet:
Die Inline-Styles (= style-Attribute) gehören in style.css ausgelagert, und werden darin, wie von mir gestern Abend demonstriert, per Media Queries überschrieben.
 
Tominator2015 schrieb:
Okay noch eine Frage, wie erstelle ich einen Media Query. Ich weis was das ist aber weis nicht wie man das erstellt.
Zum Vergrößern anklicken....
Dafür habe ich Dir längst eine der vielen Online-Dokumentationen empfohlen, und ein kleines jsfiddle-Demo inkl. Media Query gestrickt, das Du lediglich auf Deine Seitenverhältnisse abstimmen mußt o_O
Spicelab schrieb:
Die Abfrage der Fensterbreite erfolgt mit https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Kleines Beispiel dazu: https://jsfiddle.net/spicelab/vy3xs0ra/
Zum Vergrößern anklicken....
 
Okay das hat funktioniert, aber gibt es eine Möglichkeit noch etwas in der index Datei zu ändern:
class="navbar navbar-default navbar-fixed-top menu-bild"
zu
class="navbar navbar-inverse navbar-fixed-top menu-bild"?
 
ICh habe das jetzt so gelöst (so war es für mich am einfachsten):


CSS: 
@media only screen and (min-width: 770px) {
.menu-bild {
  
    background-image: url(../../../../../../fileadmin/firmen_logo_website.PNG);
    height: 80px;
    width: 1100px;
    margin-left: auto;
    margin-top: 0;
    margin-right: auto;
    display: block;
  
}

.menu-titel {
  
    display: none;
}

.menu-text {
  
    margin-top: 40px;
    float: left;
    padding-bottom: 10px;  
}  
}

HTML: 
<nav class="navbar navbar-default navbar-fixed-top menu-bild" />
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand menu-titel " href="">Titel</a>
</div>
<div class="navbar-collapse collapse menu-text">
<ul class="nav navbar-nav" style="padding-bottom: 10px;" >
<li><a href="">Home</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

So funktioniert es jetzt einwandfrei.
Vielen Dank für die Tipps und die Hilfe.

Gruß
Tom
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben