Collapsible nav with burger menu, no JS
Σελίδα 1 από 1 • Μοιραστείτε
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
HTML:
CSS:
HTML:
- Κώδικας:
<p>Look ma, no JavaScript!</p>
<p><small>(If you're all about the markup and don't mind a tiny bit of JS, check <a target="_blank" href="http://codepen.io/eduardoboucas/pen/rayExg">this one</a>.)</small></p>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<nav id="navigation1" class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="http://www.greekport.gr">GreekPort.gr</a></li>
<li><a href="#">Stuffs</a></li>
<li><a href="#">Other stuffs</a></li>
<li><a href="#">Cats</a></li>
</ul>
</nav>
CSS:
- Κώδικας:
.burger {
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 4px solid currentColor;
width: 28px;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-bottom: 4px solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
-ms-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
-ms-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.burger-check:checked ~ .navigation {
max-height: 500px;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-style: italic;
font-size: 30px;
text-align: centeR;
}
a {
color: inherit;
}
small {
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης