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
Hi mr.gnom,
nicht schlecht. Aber leider möchte ich meine Navi von oben Responsive haben und keine andere Navi. sorry^^
mfg 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.:?
<!-- 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="Über mich" class="dropbtn">Über mich</a>
<div class="dropdown-content">
<a href="#" title="Über mich">Ü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 --><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