Ergebnis 1 bis 6 von 6

Thema: Responsive Navigation?

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

    Standard Responsive Navigation?

    Hallo Leute,

    ich Versuch gerade meine eigene Homepage umzusetzen. Und fange gerade mit der Navi an. Und leider scheitere ich immer an so einer Responsiven Navigation.
    Ich dachte da an so eine Navi.
    navi.jpg

    Hier bis jetzt die CSS und HTML Datei von der Navigation ohne Responsive.
    HTML-Code:
    <!-- Navi -->
    <div id="navi">
                <div id="navi_text">
    <ul>
      <li><a href="#Startseite" title="Startseite" class="active">Startseite</a></li>
        <li class="dropdown">
        <a href="#" title="&Uuml;ber mich" class="dropbtn">&Uuml;ber mich</a>
        <div class="dropdown-content">
          <a href="#" title="&Uuml;ber mich">&Uuml;ber mich</a>
        </div>
      <li class="dropdown">
        <a href="#" title="Kategorien" class="dropbtn">Kategorien</a>
        <div class="dropdown-content">
          <a href="#">Kategorie1</a>
          <a href="#">Kategorie2</a>
          <a href="#">Kategorie3</a>
          <a href="#">Kategorie4</a>
          <a href="#">Kategorie5</a>
        </div>
      <li>
          <a href="#">Gallery</a>
          <a href="#">Links</a>
          <a href="#">Kontakt</a>
          <a href="#">Impressum</a>
      </li>
            </ul>
        </div>
    </div>
          
    <!-- / Navi -->
    Code:
    <style type>
    #navi {
        background: #837f7a;
    }
    
    
    #navi_text {
        width: 92%;
        max-width: 912px;
        margin: 0 auto;
    }
    
    ul {
        list-style-type: none;
        overflow: hidden;
        font-size: 15px;
    }
    
    li {
        float: left; 
        margin: 0 0 0 5px;
    }
    
    li a, .dropbtn {
        display: inline-block;
        color: #FFFFFF;
        padding: 10px 20px;
        text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
        background-color: #2a2828;
        -webkit-transition: all 0.2s linear; 
        -moz-transition: all 0.2s linear; 
        -o-transition: all 0.2s linear; 
        -ms-transition: all 0.2s linear; 
        transition: all 0.2s linear;
    }
    
    li.dropdown {
        display: inline-block;
        margin: 0 0 0 5px;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #837f7a;
        min-width: 194px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        padding: 10px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        -webkit-transition: all 0.2s linear; 
        -moz-transition: all 0.2s linear; 
        -o-transition: all 0.2s linear; 
        -ms-transition: all 0.2s linear; 
        transition: all 0.2s linear;
    }
    
    .dropdown-content a:hover {
        background-color: #2a2828;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        opacity: 0.9;
    }
    
    .active {
        background:#2a2828;
    }
    </style>
    Könnt ihr mir da Helfen?

    mfg RaCuBu
    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
    Youngster
    Registriert seit
    15.06.2016
    Ort
    Celle
    Beiträge
    11
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Responsive Navigation?

    Ich habe Deinen Post gelesen und es als perfekte Aufgabe gesehen, da ich noch im Studium bin, bin ich noch nicht perfekt aber, ich denke das Ergebnis lässt sich sehen.
    Ist aber bischen viel Quelltext geworden sry, hehe.

    HTML-Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <link rel="stylesheet" href="main.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
       <div id="wrapper">
            <nav>
                <div id="menu">
                    <ul>
                        <li id="ul1"><a href="#">home</a>
                            <script>
                                $("#ul1")
                                .mouseleave(function(){move_out('.li1');setTimeout(function(){$('#ul1_a').css("display","none");},500);})
                                .mouseenter(function(){$("#ul1_a").css("display","block");move_in('.li1');});
                            </script>
                            <ul id="ul1_a">
                                <li class="li1"><a href="#">home2</a></li>
                                <li class="li1"><a href="#">home3</a></li>
                            </ul>
                        </li>
                        <li id="ul2"><a href="#">bilder</a>
                            <script>
                                $("#ul2")
                                .mouseleave(function(){move_out('.li2');setTimeout(function(){$('#ul2_a').css("display","none");},500);})
                                .mouseenter(function(){$("#ul2_a").css("display","block");move_in('.li2');});
                            </script>
                            <ul id="ul2_a">
                                <li class="li2"><a href="#">bilder2</a></li>
                                <li class="li2"><a href="#">bilder3</a></li>
                            </ul>
                        </li>
                        <li id="ul3"><a href="#">blog</a>
                            <script>
                                $("#ul3")
                                .mouseleave(function(){move_out('.li3');setTimeout(function(){$('#ul3_a').css("display","none");},500);})
                                .mouseenter(function(){$("#ul3_a").css("display","block");move_in('.li3');});
                            </script>
                            <ul id="ul3_a">
                                <li class="li3"><a href="#">blog2</a></li>
                                <li class="li3"><a href="#">blog3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div id="main"></div>
        </div>
    </body>
    </html>
    css:
    Code:
    * {
        margin:0;
        padding:0;
    }
    #wrapper {
        width: 80%;
        margin: 0 auto;
    }
    nav {
        width: 20%;
        min-height: 400px;
        border: 2px solid #000;
        float: left;
    }
    #main {
        min-height: 400px;
        border: 2px solid #000;
        margin-left: 20%;
    
    
    }
    #menu {
        border: 3px solid #0066CC;
        border-radius: 5px;
        width: 80%;
        margin: 10px auto 0 auto;
    }
    
    
    ul {
        display: block;
        list-style-type: none;
        margin: 0px auto;
        padding:0;
    
    
    }
    ul li {
        background-color: #0066CC;
    
    
    
    
    }
    li a{
        display: block;
        text-align: center;
        text-decoration: none;
        color: #CCCCCC;
        line-height: 2em;
        height: 30px;
    }
    
    
    ul li ul{
        display: none;
    }
    ul li li{
        background: #CCCCCC;
    }
    
    
    ul li:hover li{
        height: 30px;
    }
    
    
    ul li:hover ul a{
        display: block;
    
    
    
    
    }
    ul li ul a{
        color: #0066CC;
    }
    
    
    ul li ul a:hover{
        background: #57ABFF;
    }
    #ul1, #ul2, #ul3{
        border-bottom: 1px solid #FFF;
    }
    
    
    @keyframes slidein
    {
        from{height:0px;opacity:0;}
        to{height:30px;opacity:1;}
    
    
    }
    @keyframes slideout
    {
        0%{height:30px;opacity:1;}
        25%{height:22.5px;opacity:1;}
        50%{height:15px;opacity:0.5;}
        75%{height:7.5px;opacity:0.1;}
        100%{height:0px;opacity:0;}
    }
    @keyframes show
    {
        0% {height:0px;opacity:0;}
        25% {height:0px;opacity:0;}
        50% {height:0px;opacity:0;}
        75% {height:0px;opacity:0;}
        100% {height:20px;opacity:1;}
    
    
    }
    
    
    .slide_in {
       animation-name: slidein;
       animation-duration: 0.5s;
    }
    .slide_out {
       animation-name: slideout;
       animation-duration: 0.5s;
    }
    js:
    Code:
    function move_in(wert1){
        $(wert1).removeClass("slide_out");
        $(wert1).addClass("slide_in");
    };
    function move_out(wert1){
        $(wert1).removeClass("slide_in")
        $(wert1).addClass("slide_out");
    };
    Ich bin mir sicher, es geht erheblich schöner, aber es funktioniert
    hab son ding halt noch nie geschrieben.

    - - - Aktualisiert - - -

    Man müsste versuchen die ganze Js Action in ein Object auszulagern und dann immer wieder auf das Object zugreifen.
    Das meinte ich halt mit schöner.
    Geändert von mr.gnom (25.06.2016 um 18:08 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Responsive Navigation?

    Hi mr.gnom,

    nicht schlecht. Aber leider möchte ich meine Navi von oben Responsive haben und keine andere Navi. sorry^^

    mfg RaCuBu

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Responsive Navigation?

    Hallo

    Deine Fragestellung ist leider nicht deutlich genug um sie zu beantworten.

    Vielleicht hilft dir der folgende Artikel weiter:

    https://www.drweb.de/magazin/respons...ne-javascript/

    Gruss

    MrMurphy

  5. #5
    Youngster
    Registriert seit
    15.06.2016
    Ort
    Celle
    Beiträge
    11
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Responsive Navigation?

    Ups peinlich, hehe.
    Stimmt ja, da war ja was, von wegen Responsive. Ich muss mich momentan einfach zuviel mit Frameworks rumschlagen so dass ich mir ne Welt ohne js momentan gar nicht vorstellen kann.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Responsive Navigation?

    Hi mr.gnom,

    ist doch keine Thema, kann ich Verstehen. Ich brauch nur Hilfe wie ich aus meiner Navi (siehe oben) eine Responsive Navi erstellen kann. Wie das Bild was ich oben Eingefügt habe. Hab mir auch mal Tut angeschaut, werde aber da nicht richtig schlau^^ Da ich kein Profi in sowas bin.

    mfg RaCuBu

Ähnliche Themen

  1. Responsive Frage
    Von nadjak im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 29.02.2016, 15:02
  2. responsive -> PDF und Footer
    Von TanjaP. im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2015, 14:13
  3. Responsive Bilder mit CSS und PHP
    Von klopp1991 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.05.2014, 22:15
  4. [biete] Web Designer / Responsive Design (m/w)
    Von Vermittler im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 09.02.2014, 13:24
  5. Responsive Webdesign - Hinweis für IE 5.5 - 8.0
    Von Manni68 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.02.2014, 16:46

Stichworte

Berechtigungen

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