Responsive Navigation?

RaCuBu

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.

Hier bis jetzt die CSS und HTML Datei von der Navigation ohne Responsive.:?

HTML

<!-- 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 -->

Alles anzeigen

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>

Alles anzeigen

Könnt ihr mir da Helfen?

mfg RaCuBu

mr.gnom

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

<!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>

Alles anzeigen

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;
}

Alles anzeigen

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.

RaCuBu

Hi mr.gnom,

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

mfg RaCuBu

MrMurphy

Hallo

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

Vielleicht hilft dir der folgende Artikel weiter:

https://www.drweb.de/magazin/respon…hne-javascript/

Gruss

MrMurphy

mr.gnom

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.

RaCuBu

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

Tags