Ergebnis 1 bis 2 von 2

Thema: Resonsive Navigation für Mobile, Tablet & Desktop

  1. #1
    HTML Newbie
    Registriert seit
    22.02.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Resonsive Navigation für Mobile, Tablet & Desktop

    Halloo, ich brauche eine responsive Navigation für Mobile, Tablet & Desktop Anwendungen.
    Momentan habe ich die Navigation an meine Bildschirmgröße mit 180px angepasst,
    allerdings weiß ich nicht wie ich nun weiter komme

    Mein css file dazu:
    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {
    display: block;
    }

    nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #56b29e 90%);
    background: -moz-linear-gradient(top, #efefef 0%, #56b29e 90%);
    background: -webkit-linear-gradient(top, #efefef 0%, #56b29e 90%);
    box-shadow: 0px 0px 9px rgba(86, 178, 158, 0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    }
    nav ul:after {
    content: ""; clear: both; display: block;
    }

    nav ul li {
    float: left;
    }
    nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    nav ul li:hover a {
    color: #fff;
    }

    nav ul li a {
    display: block; padding: 16px 180px;
    color: rgba(0, 0, 0, 0.98); text-decoration: none; font-size:13pt;
    }

    nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    }
    nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    }
    nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
    }
    nav ul ul li a:hover {
    background: #4b545f;
    }

    Mein html file:

    <nav>
    <ul>
    <li><a href="DesignVorlage.html">Übersicht</a>
    <ul>
    <li><a href="#">Übersicht 1</a></li>
    <li><a href="#">Übersicht 2</a></li>
    </ul>
    </li>
    <li><a href="Taetigkeitenerfassung.php">Tätigkeit</a></li>
    <li><a href="index.php"><span class="glyphicon glyphicon-log-out"></span> Abmelden</a></li>
    </ul>
    </nav>

    Momentane Sicht:Navigation.jpg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Resonsive Navigation für Mobile, Tablet & Desktop


Ähnliche Themen

  1. mobile Website - easy mobile CMS
    Von Andreas Meier im Forum Webanwendungen - Webapplikationen
    Antworten: 0
    Letzter Beitrag: 06.09.2015, 19:41
  2. Mobile Ansicht und Desktop
    Von Lars Sentis im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.11.2013, 17:59
  3. Navigation für mobile geräte
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 31.01.2013, 10:40
  4. Tablet Forum
    Von crios im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 3
    Letzter Beitrag: 26.03.2010, 17:41

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •