zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Toggle Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.01.2014, 21:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard Toggle Navigation

Hallo,

ich bin nach langer Zeit wieder einmal dabei unsere Vereinshomepage zu modernisieren.
Habe viel mit Responsive gearbeitet damit sich die Seite auf dem Smartphone anpaßt.
Das klappt auch fast einwandfrei auch wennman beim start noch etwas nach recjts scrollen kann. Das sollte aber nicht sein.
Mein anderes Problem:
Die Navigation paßt sich zwar an, füllt aber das ganze Display beim start aus.
Jetzt habe ich mir gedacht, ein verstecktes Toogle Menu einzubauen.
Die Navigation sollte dann über einen Menü Button aufklappen.
Habe schon viel gegoogelt aber ich komme da einfach nicht weiter, das sich die bestehende Navigation beim Smartphone einklappt.
Kann mir jemand mit Rat und Tat zur Seite stehen?
Dafür wäre ich Euch sowas von dankbar.
Hier mal der Link zu meiner Testseite:
Mainzer Freischützen Garde e.V.

Es sollte ohne Java sein.

Ich danke Euch schon mal für Eure Hilfe.

Gruß
Garfield
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.01.2014, 22:22
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Guck mal habe gegooglet. Habe ich gerne gemacht. Ich weiß, außer mir kanns anscheinend kein anderer. Übrigens, gesucht habe ich nach "responsive navigation no js"

Responsive Toggle Navigation - No JavaScript | Joe Snell

Und es heißt JavaScript, nicht Java.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.01.2014, 23:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Thielo,

auf genau dieser Seite war ich auch und habe versucht dieses auf meiner Seite umzusetzen.
Ich weiß aber nicht wo was hinkommt und welche Anweisungen ich ändern muß da ich ja andere Bezeichnungen habe.
Die Seite scheint schon gut zu sein wenn man sie auch umzusetzen weis.
Da hört es dann aber bei mir leider auf.

Gruß
Garfield
Mit Zitat antworten
  #4 (permalink)  
Alt 15.01.2014, 03:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zeig mal etwas Code wie du es versucht hast.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.01.2014, 11:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Zeig mal etwas Code wie du es versucht hast.
Hier ist der CSS Code wie ich ihn abgeändert habe.
Habe jetzt nur den Code für die Mobile Navigation & Header hier eingestellt.
Wenn Du mehr brauchst stelle ich es ein.

@media only screen and (min-width: 320px) and (max-width: 480px) {
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
#div1 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
#wrapper {
height: auto;
width: 480px;
}
iframe {
width: 100%;
height: auto;
}
header {
width: 100%;
height: 80px;
box-shadow: -5px 0px 20px 5px #000000;
-webkit-box-shadow: -5px 0px 20px 5px #000000;
-moz-box-shadow: 0px -5px 20px 5px #000000;
-ms-box-shadow: 0px -5px 20px 5px #000000;
-o-box-shadow: 0px -5px 20px 5px #000000;
}
header .header_inner {
width: 100%;
height: 70px;
}
header .header_inner .header_logo {
width: 100%;
margin: 0 0 10px 0;
height: 145px;
}
header .header_inner .header_logo h1 {
width: 100%;
height: 100%;
}
header .header_inner .header_logo h1 a {
display: block;
width: 100%;
height: 100%;
}
}

/* Navigation */

header .header_inner nav {
left: 0;
position: absolute;
top: 0;
}


body:not(:target) #header .header_inner nav {
padding-top: 0;
}
body:not(:target) #header .header_inner nav li {
display: inline;
border: none;
}
body:not(:target) #header .header_inner nav li a {
color: #555555;
font-weight: bold;
text-shadow: inherit;
line-height: 1em;
padding: .75em;
height: 2em;
width: auto;
border: none;
background-color: transparent;
}
body:not(:target) #header .header_inner nav li a:hover {
color: black;
}
body:not(:target) #header .header_inner nav .back {
display: none;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 15.01.2014, 12:42
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

ich denke du gehst das ganze falsch an. Du hast eine (imho technisch nicht gut gemachte) starre pixelgenaue Webseite, welche nun 'unbedingt' responsive werden soll.

Zum technisch schlecht gemacht:
Semantik nicht umgesetzt, viel überflüssiges html, kein gutes css.
Das respond.js braucht eigentlich nur der IE<9.

Responsive: keine Pixel verwenden, nur em und % (soweit möglich).
Sauberes logisches html macht das Entwickeln leichter.
Nur einen Breakpoint 320px-480px? Kann reichen, besser min. noch einen (in em).
Muss es eine Navi ohne js sein? Deine Fonts werden auch per js eingebunden.

Beschränke dich erstmal auf das Basislayout und lass die Design-Gimmicks (box-shadow usw.) erstmal weg
Mit Zitat antworten
  #7 (permalink)  
Alt 15.01.2014, 12:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Manfred,

deshalb habe ich mich hier gemeldet. Ich bin ein Laie was das ganze angeht und war froh das ich soweit gekommen bin.
Habe die Webside nach der Anleitung von Video2Brain angelegt.
Die Schatten bekomme ich bestimmt wieder raus.
Dann muß ich mich auch einmal selbst mit em befassen um zu wissen welche größe das darstellt.

Und wie sieht es mit meinem Toggle Menü aus?
Ist das umsetzbar für Smartphones?

Nachtrag:
Habe mal gegoogelt und festgestellt das 1em = 16 Pixel entspricht.
Könnte ich diesen Umrechnungsfaktor nehmen?

Gruß
Garfield

Geändert von garfield1711 (16.01.2014 um 14:44 Uhr) Grund: Nachtrag
Mit Zitat antworten
  #8 (permalink)  
Alt 17.01.2014, 18:17
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

zum einfachen umrechnen px-em: Pixel in EM umrechnen*

zu responsive allgemein:
am einfachsten vom denken her ist desktop --> mobil. Die media-queries beginnen i.d.R. mit max-width.
mobile first (mobil --> desktop) ist der aktuelle 'Weg'. Das schwächste Glied in der Kette (Smartphone) wird zuerst bedient. Die media-queries beginnen i.d.R. mit min-width.
Ich nutze als Basis gern PocketGrid. In der Doku gibts jede Menge Beispiele.

Z.B. deine Seite:
die Navigation oben hat 6 Links --> Breite 100%:6
die Footer Navi hat 3 Links --> Breite 100%:3
die Boxen in der Mitte machst genauso --> 100% durch 3 minus seitlicher Abstand

mit media-queries legst dann fest, was sich ab bestimmten Breiten (in em) ändern soll.

zur Navigation: ist machbar, kommt auf den Aufwand an welchen man in Kauf nimmt.
einfachste Variante (wenn man wenig Links hat): kein toggle, alle Links 100% breit, vertikal aufeinander.
nächste Möglichkeit: man nimmt etwas js zu Hilfe. Gibt zig Tutorials dafür.
Die o.g. Methode mit target (ohne js): ist mehr Aufwand. Habs mal nachgebaut. Ist etwas tricky...
Mit Zitat antworten
  #9 (permalink)  
Alt 17.01.2014, 21:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard

zur Navigation: ist machbar, kommt auf den Aufwand an welchen man in Kauf nimmt.
einfachste Variante (wenn man wenig Links hat): kein toggle, alle Links 100% breit, vertikal aufeinander.
nächste Möglichkeit: man nimmt etwas js zu Hilfe. Gibt zig Tutorials dafür.
Die o.g. Methode mit target (ohne js): ist mehr Aufwand. Habs mal nachgebaut. Ist etwas tricky...[/QUOTE]

Hallo Manfred,

danke schon mal für diese Hinweise.
Habe mich jetzt auch gefragt, warum eigentlich kein js.
Mit js habe ich auch gelesen das der Aufwand dann nicht so groß und kompliziert ist.
Werde mir Deine empfohlenen Seiten mal ansehen.

Komme aber erst nach dem Wochenende zum probieren da wir in Mainz fastnachtlich unterwegs sind (sieht man ja an der Homepage).
Ich melde mich wieder.

Nochmals vielen Dank bis dahin.

Gruß
Garfield
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.01.2014, 23:52
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

HIinweis: Du kannst im Editor verschiedene Schalter(Tags) verwenden um Zitate einzufügen oder auch Quellcode, bitte mache der Übersichtlichkeit halber davon Gebrauch.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Navigation ist nicht mittig Schokokrapfen CSS 29 20.09.2011 00:19
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:21 Uhr.