Navigation für mobile Geräte

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

16:29, 23.6.2015

Ich habe meine Internetseite nun etwas (hust stark hust) umdesignt, und bin nun dabei, diese für mobile Geräte anzupassen (Smartphones, Tablets, Nintendo/PlayStation Portable Konsolen usw), und muss daher Änderungen an der Navigation vornehmen, da :hover nicht funktioniert. Ich habe bereits einen Knopf, um das Menü zu öffnen, allerdings wird es nun mit den Untermenüs kompliziert.
Hat jemand eine angenehme Darstellungsweise für mobile Geräte?
Ich dachte so an eine Box, so groß wie das Darstellungsfenster ist, und da drunter eine Liste mit den Links.

Derzeitiger Code für mobile Geräte:
HTML

<header>
<div class="menu-wrap">
<span class="h1">thebigsmileXD</span>
<nav class="menu">
<ul class="clearfix"><li><a href="/de_DE">Home</a><ul class="sub-menu"></ul></li><li><a disabled="true">Forum</a><ul class="sub-menu"></ul></li><li><a href="/de_DE/chat">Chat</a><ul class="sub-menu"><li><a href="/de_DE/chat">Mein Chat</a></li><li><a href="http://dsitubenet.ishoutbox.com">DsiChat</a></li></ul></li><li><a disabled="true">Server</a><ul class="sub-menu"><li><a disabled="true">WolvesFortress</a></li><li><a disabled="true">WolvesFortressPE</a></li><li><a href="http://cubeside.de">Cubeside</a></li><li><a href="http://www.minecraftgb.de">Germanys Baugrube</a></li><li><a href="http://www.freecraft.eu">Freecraft</a></li><li><a href="http://german-mine.net/home">German-Mine</a></li><li><a href="https://www.dustmc.de">DustMC</a></li><li><a href="http://rewinside.tv">Rewinside</a></li></ul></li><li><a disabled="true">TeamSpeak</a><ul class="sub-menu"><li><a href="ts3server://5.175.226.133?nickname=Linkverfolger&amp;addbookmark=WolvesFortress%20TS">WolvesFortress</a></li><li><a href="ts3server://cubeside.de?nickname=Linkverfolger&amp;addbookmark=Cubeside">Cubeside</a></li><li><a href="ts3server://88.198.23.235?password=milchkuh&amp;nickname=Linkverfolger&amp;addbookmark=Germanys%20Baugrube">Germanys Baugrube</a></li><li><a href="ts3server://ts.aternos.org?nickname=Linkverfolger&amp;addbookmark=Aternos">Aternos</a></li><li><a disabled="true">DHG</a></li><li><a href="ts3server://gommehd.net?nickname=Linkverfolger&amp;addbookmark=GommeTS">GommeTS</a></li></ul></li><li><a href="http://5.175.226.133">Dateien</a><ul class="sub-menu"><li><a href="http://5.175.226.133/Real_Photo_Pack.zip">Real Photo Pack</a></li><li><a href="http://5.175.226.133/GarPloit.rar">GarPloit Crack</a></li></ul></li><li><a href="/de_DE/Contact.php">Kontakt</a><ul class="sub-menu"></ul></li><li class=".loginbutton"><a href="/de_DE/user/index.php">Login</a><ul class="sub-menu"></ul></li></ul><br></nav>
</div>
</header>

@media only screen and (max-device-width: 480px) {
header .h1{
  line-height:80px;
  font-size:70px;
}
header {
  height: 80px;
}
.mobile-header-check:checked + header{
  height:100% !important;
}
.mobile-nav-button{
  font-size: 70px;
  width:80px;
  height:80px;
  margin:-1px;
  padding:0px;
}
header .menu > ul > li > a {
  line-height: 50px;
}
}

Danke im Vorraus!

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fatfreddy

fatfreddy hat kostenlosen Webspace.

17:02, 23.6.2015
":hover" funktioniert nicht, das ist richtig, aber es gibt eine Alternative: ":target". Wie das aussehen kann, ist hier beschrieben: Pure CSS3 responsive navigation with :target
Autor dieses Themas
thebigsmilexd

thebigsmilexd hat kostenlosen Webspace.

17:21, 23.6.2015

fatfreddy schrieb:
":hover" funktioniert nicht, das ist richtig, aber es gibt eine Alternative: ":target". Wie das aussehen kann, ist hier beschrieben: Pure CSS3 responsive navigation with :target

Target kenne ich, funktionierte auf dem Nintendo DSi sehr gut.. hatte es nur irgendwie verdrängt :D
Kam nur nicht drauf, dies zu verwenden :)
Das Problem ist allerdings, dass das Design halt nicht sehr ansehnlich ist, zusätzlich sind die Hauptpunkte auch manchmal links..
kozak

kozak hat kostenlosen Webspace.

19:01, 23.6.2015
Hast du versucht dich mit Bootstrap anzufreunden? Bootstrap ist bereits für die Darstellung auf unterschiedlichen Geräten und Bildschirmauflösungen optimiert und wenn du deine Seite eh neu gestaltest, könntest du evtl auch einen Blick da rein werfen.
Autor dieses Themas
thebigsmilexd

thebigsmilexd hat kostenlosen Webspace.

7:29, 24.6.2015

kozak schrieb:
Hast du versucht dich mit Bootstrap anzufreunden? Bootstrap ist bereits für die Darstellung auf unterschiedlichen Geräten und Bildschirmauflösungen optimiert und wenn du deine Seite eh neu gestaltest, könntest du evtl auch einen Blick da rein werfen.

Wenns sowas wie ein generator ist, will ich nichts damit am hut haben :D ich schaus mir mal an, danke
muellerlukas

muellerlukas hat kostenlosen Webspace.

7:56, 24.6.2015
Ein Framework von Twitter ist das. Nimmt dir bei richtiger Benutzung doch einiges an Arbeit ab.

Autor dieses Themas

thebigsmilexd

thebigsmilexd hat kostenlosen Webspace.

20:37, 28.6.2015

Ich habe nun endlich eine Alternative herrausgefunden:

@media only screen and (max-device-width: 480px) {
.pretextimage{
  display:none;
}
.pretext{
  display:none;
}
body{
  background-color:silver;
}
.text{
  margin:0 !important;
  font-size:40px;
}
#clock_small{
  width:200px;
  height:200px;
  font-size:30px;
}
header .h1{
  line-height:80px;
  font-size:70px;
}
header {
  height: 80px !important;
  font-size:70px !important;
}
.mobile-header-check:checked + header{
  height:100% !important;
}
.mobile-nav-button{
  font-size: 70px;
  width:80px;
  height:80px;
  margin:-1px;
  padding:0px;
  z-index:5;
}
header .menu{
  display:auto;
}
header .menu ul{
  clear: none;
  display: inline;
  position:relative;
}

header .menu > * {
  height: 80px !important;
  font-size:70px !important;
  line-height: 80px;
}
header .menu > ul > li {
  display: block;
  clear: none;
}
header .menu > ul > li > a {
  font-size: 70px;
  line-height: 80px;
}
header .sub-menu {
  width:100%;
  padding:0px;
  position:auto;
  top:100%;
  left:0px;
  right:0;
  transition:opacity linear 0.15s;
  box-shadow:0px 2px 3px rgba(0,0,0,0.2);
  background:#2e2728;
  padding:0px;
  z-index:2;
  opacity:1;
  display:block;
  margin:20px;
}
header .sub-menu li {
  font-size: 70px;
  box-shadow: none;
  border: 1px solid black;
  background-color: darkgoldenrod;
}
header .sub-menu li a{
  color: initial;
}
object{
  display:none;
}
embed{
  display:none;
}
}

Diese Zeilen:

header .menu ul{
  clear: none;
  display: inline;
  position:relative;
}

und diese Zeilen:

header .menu > ul > li {
  display: block;
  clear: none;
}

lassen die Navigation und die jeweiligen Sublinks nun schön als Liste dastehen :)
Das Framework habe ich mir angeschaut, vielleicht übernehme ich das Eine oder Andere sogar.
Damit Danke an alle, #closed.

cashkingdom

cashkingdom hat kostenlosen Webspace.

12:26, 7.7.2015
Die mobile Anpassung in Bootstrap funktioniert auch mit Media Queries,
jedoch werden extrem viele Werte für die Displaygröße verwendet, sodass
eine Website die mit Bootstrap erstellt wurde sich dynamisch an die Displaygröße anpassen kann.
Um so eine Anpassung an das Display, selbst mit CSS zu schreiben bräuchte man sicherlich viel Zeit.

Bootstrap herunterladen:
getbootstrap.com

Tutorial zu Bootstrap:
http://www.w3schools.com/bootstrap/

Beitrag zuletzt geändert: 7.7.2015 12:27:02 von cashkingdom
Autor dieses Themas
thebigsmilexd

thebigsmilexd hat kostenlosen Webspace.

12:49, 7.7.2015

cashkingdom schrieb:
Die mobile Anpassung in Bootstrap funktioniert auch mit Media Queries,
jedoch werden extrem viele Werte für die Displaygröße verwendet, sodass
eine Website die mit Bootstrap erstellt wurde sich dynamisch an die Displaygröße anpassen kann.
Um so eine Anpassung an das Display, selbst mit CSS zu schreiben bräuchte man sicherlich viel Zeit.

Bootstrap herunterladen:
getbootstrap.com

Tutorial zu Bootstrap:
http://www.w3schools.com/bootstrap/

Das Thema ist meiner Meinung nach schon längst erledigt. Und da ich CSS-Only nutze, bringt mir das Ganze leider nicht viel. Die Ladezeiten verstärken sich nur immer mehr.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city