Professionellen Menüleiste gesucht Html Css
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
ansicht
aufbau
besucher
bezug
blocken
boxen
code
datum
display
erstellen
http
navigation
paar
problem
system
text
url
verwenden
webseite
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hört sich für mich an, als wärst du auf der Suche nach einem CSS-Framework. Ich arbeite persönlich meistens mit:
Foundation Framework http://foundation.zurb.com/
Ich finde das Framework ausführlich erklärt, mit SASS leicht zu verändern und man hat mit SASS auch die Möglichkeit nur die Module einzubinden, die auch benötigt werden.
Es gibt im Internet auch noch haufenweise andere CSS-Frameworks:
Bootstrap Framework http://getbootstrap.com/
Ich persönlich würde dir anraten ein solches Framework zu verwenden, wenn du eine solide Basis haben willst, und dich gleichzeitig nicht allzu sehr mit CSS beschäftigen möchtest.
Da CSS-Frameworks zeitweise hart in der Kritik stehen, da vielfach übermässig viel Code geladen werden muss, gibt es alternativ natürlich auch diverse Tutorials zu diesem Thema im Internet:
Google 1. Ergebnis "css3 menu": http://cssdeck.com/labs/another-simple-css3-dropdown-menu
Ich würde darauf schauen, dass das Menü mit CSS realisiert ist und nicht irgendwie mit JavaScript oder sogar Flash, das dies dafür eigentlich nicht benötigt wird. -
Danke für die ganzen nützlichen Tipps.
Da habe ich jetzt noch eine Frage
Läuft das Menü auf jeden browser oder gibts da probleme?
<ul><li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; background: #E3CAA1; } ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: block; opacity: 1; visibility: visible; } -
Grob überblickt würde ich sagen, dass zumindest die grundlegenden Funktionen überall laufen werden, ansonsten kannst du zur Sicherheit ja noch das normalize-script einbinden:
https://necolas.github.io/normalize.css/
Dieses Script sollte dazu führen, dass auch ältere Browser die "neueren" Funktionen ausführen können. Im Foundation-Framework wird ebenfalls so ein Script eingebunden.
Beitrag zuletzt geändert: 25.10.2015 16:08:36 von stoerchu -
Man kann mit dem von dir angegebenen CSS-Code auch Untermenüs verwenden, also mit einem HTML-Code der dann so aussieht:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9 <ul> <li>9.1</li> <li>9.2</li> </ul> </li> </ul>
Hier getestet:
https://jsfiddle.net/bpgs/6mvcdgjm/
Probleme sehe ich weniger in Bezug auf bestimmte Browser als vielmehr bei bestimmten Geräten. Wenn du willst, dass deine Website (ich vermute zumindest, dass du die Navigation in eine solche einbauen willst) auch auf Geräten mit kleinerem Display gut lesbar und auch sonst benutzerfreundlich dargestellt wird, dann müsstest du dich mit responsivem Webdesign auseinandersetzen.
Beitrag zuletzt geändert: 25.10.2015 16:30:05 von mein-wunschname -
mein-wunschname schrieb:
Man kann mit dem von dir angegebenen CSS-Code auch Untermenüs verwenden, also mit einem HTML-Code der dann so aussieht:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9 <ul> <li>9.1</li> <li>9.2</li> </ul> </li> </ul>
Hier getestet:
https://jsfiddle.net/bpgs/6mvcdgjm/
Genau, ansonsten wäre 90% des CSS für nix, da es gar nicht gebraucht würde. Dies könntest du dann auch einfach als inline-Liste realisieren.
mein-wunschname schrieb:
Probleme sehe ich weniger in Bezug auf bestimmte Browser als vielmehr bei bestimmten Geräten. Wenn du willst, dass deine Website (ich vermute zumindest, dass du die Navigation in eine solche einbauen willst) auch auf Geräten mit kleinerem Display gut lesbar und auch sonst benutzerfreundlich dargestellt wird, dann müsstest du dich mit responsivem Webdesign auseinandersetzen.
Dies ist ein guter Punkt. Dies ist ein weiterer Grund warum ich eben ein CSS-Framework verwende, da mir persönlich wichtig ist, dass die Navigation auch auf verschiedenen Geräten bzw. jeder Bildschirmgrösse funktioniert und gut lesbar ist.
Genannte Funktion bietet wie gesagt das Foundation-Framework.
Da ist es auch sehr einfach die ganze Seite "responsive" zu gestalten mit minimalem Aufwand. -
stoerchu schrieb:
mein-wunschname schrieb:
Probleme sehe ich weniger in Bezug auf bestimmte Browser als vielmehr bei bestimmten Geräten. Wenn du willst, dass deine Website (ich vermute zumindest, dass du die Navigation in eine solche einbauen willst) auch auf Geräten mit kleinerem Display gut lesbar und auch sonst benutzerfreundlich dargestellt wird, dann müsstest du dich mit responsivem Webdesign auseinandersetzen.
Dies ist ein guter Punkt. Dies ist ein weiterer Grund warum ich eben ein CSS-Framework verwende, da mir persönlich wichtig ist, dass die Navigation auch auf verschiedenen Geräten bzw. jeder Bildschirmgrösse funktioniert und gut lesbar ist.
Genannte Funktion bietet wie gesagt das Foundation-Framework.
Da ist es auch sehr einfach die ganze Seite "responsive" zu gestalten mit minimalem Aufwand.
Und mutest deinen Usern einen größeren Download zu. Die Hälfte deines Codes wird ja gar nicht gebraucht und umsonst runtergeladen. Heisst deine Seite braucht länger für den Aufbau und der Besucher verschwendet gerade beim mobilen Zugriff unnütz Downloadvolumen.
Und deshalb finde ich Responsive Webdesign für die Katz. -
all-in1 schrieb:
Und mutest deinen Usern einen größeren Download zu. Die Hälfte deines Codes wird ja gar nicht gebraucht und umsonst runtergeladen. Heisst deine Seite braucht länger für den Aufbau und der Besucher verschwendet gerade beim mobilen Zugriff unnütz Downloadvolumen.
Und deshalb finde ich Responsive Webdesign für die Katz.
Jedoch lässt sich eine "normale" Website am Handy oft auch nicht sehr gut bedienen. Ich denke, zu responsivem Webdesign gehört auch einfach, eine möglichst Daten-schlanke Website zu erstellen und dazu gibt es schließlich Möglichkeiten, wie bspw. den Code für die PC-Ansicht einfach nicht herunterzuladen etc.
mfg
Jonas -
jonas-bayer schrieb:
all-in1 schrieb:
Und mutest deinen Usern einen größeren Download zu. Die Hälfte deines Codes wird ja gar nicht gebraucht und umsonst runtergeladen. Heisst deine Seite braucht länger für den Aufbau und der Besucher verschwendet gerade beim mobilen Zugriff unnütz Downloadvolumen.
Und deshalb finde ich Responsive Webdesign für die Katz.
Jedoch lässt sich eine "normale" Website am Handy oft auch nicht sehr gut bedienen. Ich denke, zu responsivem Webdesign gehört auch einfach, eine möglichst Daten-schlanke Website zu erstellen und dazu gibt es schließlich Möglichkeiten, wie bspw. den Code für die PC-Ansicht einfach nicht herunterzuladen etc.
mfg
Jonas
Das machen ja nur leider die wenigsten Webdesigner. Nur am besten ist jedoch zwei Versionen zu erstellen, eine mobile und eine normale. Und wenn man es genau nimmt, dann noch für den Fernseher. -
all-in1 schrieb:
jonas-bayer schrieb:
Jedoch lässt sich eine "normale" Website am Handy oft auch nicht sehr gut bedienen. Ich denke, zu responsivem Webdesign gehört auch einfach, eine möglichst Daten-schlanke Website zu erstellen und dazu gibt es schließlich Möglichkeiten, wie bspw. den Code für die PC-Ansicht einfach nicht herunterzuladen etc.
mfg
Jonas
Das machen ja nur leider die wenigsten Webdesigner. Nur am besten ist jedoch zwei Versionen zu erstellen, eine mobile und eine normale. Und wenn man es genau nimmt, dann noch für den Fernseher.
Ja dies wäre in der Tat wahrscheinlich die beste Lösung, allerdings auch die teuerste, da der Zeitaufwand dafür doch ziemlich viel höher liegt, als wenn man einfach ein CSS-Framework verwendet.
Wenn man aber SASS verwendet, um das Framework zu verändern, kann man ja auch mit kleinem Aufwand die Teile ausblenden, die nicht benötigt werden. Schlussendlich kommt es auf ein paar KB mehr oder weniger bei den meisten Websites nicht an, da die Seitenaufrufe nicht wahnsinnig gross sein werden. Wenn die Seiten pro Tag mehrere Tausend mal aufgerufen werden, ist dies natürlich etwas ganz anderes, da addiert sich der entstandene Traffic sehr schnell in erheblichem Masse, dass es sich unter Umständen rentiert, die Zeit zu bezahlen bzw. aufzuwenden, um die Datenmenge zu reduzieren.
Es ist doch alles jeweils eine Frage des Verhältnis von Aufwand : Ertrag, welches ausschlaggebend ist, ob es sich lohnt, alles von Grund auf zu entwickeln. Deshalb gibt es hier auch kein absolutes JA oder NEIN zum Thema responsive Webdesign, oder auch CSS-Framework. -
Geht alles immer zu Lasten der Besucher. Denn dieser zahlt ja Schlußendlich seinen Traffic und nicht der Webseitebetreiber.
Ich finde es jedenfalls nicht so lustig, wenn ich mit dem Smartphone mehr runterladen muss, als notwendig.
Und ich bin auch einer, der eine Webseite weg klickt, wenn diese sich nicht schnell genug aufbaut. Ich habe eben nur eine 400er DSL Leitung, und wenn ich da mehr als eine Minute warten muss, bis ich Inhalt sehen kann, dann ist die Seite weg und gehe dann woanders hin. Und gleiches ist beim Smartphone, nicht überall ist LTE verfügbar, also auch hier oftmals langsamer Seitenaufbau. Und da spielen ein paar mehr KB wohl doch eine Rolle. erstmal summiert sich der Traffic, für den ich bezahle und zum andern baut sich die Seite langsamer auf und ich bin weg. Wenn ich weg dann keine Einnahmen, ergo alles raus geschmissenes Geld. Und das nur weil man ein paar hundert Euro sparen wollte.
Und ziemlich viel höher liegt der Aufwand gar nicht. Es sind nur ein paar Codezeilen, um von einem CSS ins nächste zu springen. Es ist nur meistens entweder Faulheit der Designer oder pures Unwissen. Und man entwickelt es meist nur einmal von Grund auf, und verändert es dann nur nach den Bedürfnissen. Anders macht man es mit einem Framework ja auch nicht. Es ist einmal entwickelt worden und wird dann je nach den Bedürfnissen verändert. Geht mit einigen CMS-Systemen nicht ganz so schön wie mit anderen, aber Responsive Design Frameworks muss man definitiv nicht einsetzen. Ich könnte sogar für jedes Mobil Device eine andere Webseite anzeigen lassen, ohne das irgendwo auch nur etwas geladen wird, was für andere bestimmt ist. Es sind nur ein paar Zeilen PHP Code.
Genauso bei den CMS-Systemen. Kein System ist hundert Prozent so, wie man es gerade braucht. Man verändert immer etwas, damit es passt, bei dem einen System etwas mehr als bei einem anderen. Aber entwickelt wurden diese nur einmal und werden dann eben angepasst. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
