Webseite anpassen an Mobile Geräte

[janschmidt]

Guten Morgen,

ich habe eine Frage und zwar möchte ich meine Webseite so anpassen das sie nicht mehr nur auf PC gut angezeigt werden kann sondern auch auf mobilen Geräten gut läuft. Ich habe mir auch schon einiges angesehen zu dem Thema responsives Webdesign das wird zwar nicht ganz einfach für mich da ich nicht so weit in dem Thema bin. Aber ich habe ein Problem und hoffe das mir hier jemand ein Ansatz geben kann wie man das schön lösen kann. Ich habe ein sehr umfassendes Menu auf meiner Seite www.jans-pflanzenwelt.de und weiß nicht wie man so etwas z.B. auf einem kleinen Handy gut darstellen kann. Schon einmal Danke für alle die sich die Mühe sich das ganze mal anzusehen

 

[Tronjer]

Schau dir mal heise.de auf deinem Smartphone an. So etwas in der Art brauchst du. Nennt sich Hamburger Menu.

 

[MrMurphy]

Hallo

Hamburger Menu? Na ja:

http://www.creativeconstruction.de/blog/hamburger-menue-ja-oder-nein/

Gruss

MrMurphy

 

[scbawik]

Hallo

Hamburger Menu? Na ja:

http://www.creativeconstruction.de/blog/hamburger-menue-ja-oder-nein/

Gruss

MrMurphy

Alternative?
Habe eigentlich noch kein richtig benutzerfreundliches Menü am Smartphone gesehen.
Vielleicht Tabs, aber diese funktionieren auch nur bei kleinen Seiten.

Oder meinst du nur das Symbol?

 

[janschmidt]

Vielen Dank erst einmal an alle die mir geantwortet haben ich hatte leider nicht so viel Zeit in den letzten Tage hier zu schreiben. Ein bisschen weiter bin ich jetzt schon gekommen ich habe die komplette Oberfläche verändert und auch ein Menü was sich fast so verhält wich ich es mir vorstelle. Das Einzige was noch nicht so richtig geht wie ich möchte ist das wenn ich ein Untermenü öffne das sich die anderen wieder schließen. Vielleicht hat da ja noch mal jemand einen Tipp Hier meine Testseite http://www.jans-pflanzenwelt.de/teich/index.php und der Code
$(document).ready(function() {
$(".menu li:not(.active) ul").hide();
$(".menu li a").on("click", function(e) {
var $this = $(this);
var $submenu = $this.next("ul");
if($submenu.is(":visible")) {
$submenu.stop(true, true).slideUp();
}
else {
$submenu.stop(true, true).slideDown();
}
});
});


Nochmals Danke an Alle

 

[Tronjer]

Da kommst du selber drauf.

Logik: Bevor ein Submenü geöffnet wird, schließe alle anderen.

 

[janschmidt]

Leider nicht alles was ich versucht habe hat damit geendet das sich das komplette Menü geschlossen hat wenn ich ein Untermenü zu gemacht habe so das ich dann auch kein anderes Untermenü mehr aufmachen konnte.

 

[Tronjer]

Dann vereinfacht man die Aufgabe eben.

<ul>
    <li>
        <p class="parent">Menu 1</p>
        <ul class="child">
            <li>
                <p class="parent">Menu 1.1</p>
                <ul class="child">
                    <li><p>Foo</p></li>
                    <li><p>Bar</p></li>
                    <li>
                        <p class="parent">Menu 1.2</p>
                        <ul class="child">
                            <li>Baz</li>
                            <li>Ban</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

$('.child').hide();

$('.parent').on('click', function() {
    $(this).next('.child').find('.child').hide();
    $(this).next('.child').slideToggle();
});