Responsive Iconic Menu για το blog/site σας.
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Πεμ Μαρ 08, 2018 7:04 pm
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
Αυτή η κομψή οριζόντια γραμμή μενού παραμένει κρυμμένη μέχρι ο χρήστης να κάνει κλικ σε ένα εικονίδιο, αποκαλύπτοντας το μενού. Χρησιμοποιώντας το CSS3.
[ [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.] ]
Το Pizzazz είναι στο πλευρό του, ένα μενού που ανταποκρίνεται σε μεγάλο βαθμό σε διάφορες συσκευές και μεγέθη οθόνης.
Είναι ένα όμορφο πράγμα όταν το ύφος και η λειτουργία συναντώνται!
Αντικαταστήστε τους συνδέσμων από τον κώδικα πριν την αποθήκευση και τους τίτλους του μενού και κάντε αποθήκευση!
Από [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
Αυτή η κομψή οριζόντια γραμμή μενού παραμένει κρυμμένη μέχρι ο χρήστης να κάνει κλικ σε ένα εικονίδιο, αποκαλύπτοντας το μενού. Χρησιμοποιώντας το CSS3.
[ [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.] ]
Το Pizzazz είναι στο πλευρό του, ένα μενού που ανταποκρίνεται σε μεγάλο βαθμό σε διάφορες συσκευές και μεγέθη οθόνης.
Είναι ένα όμορφο πράγμα όταν το ύφος και η λειτουργία συναντώνται!
- Κώδικας:
<style>
body { /* webkit adjacent sibling bug fix */
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
.iconicmenu {
position: relative;
height: 45px;
overflow: hidden;
}
.iconicmenu, .iconicmenu * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.iconicmenu > label { /* Main label icon to toggle menu state */
z-index: 1000;
display: block;
position: absolute;
width: 40px;
height: 40px;
float: left;
top: 0;
left: 0;
background: white;
text-indent: -1000000px;
border: 6px solid black; /* border color */
border-width: 6px 0;
cursor: pointer;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* transition for flipping label */
}
.iconicmenu > label::after { /* inner stripes inside label */
content: "";
display: block;
position: absolute;
width: 100%;
height: 18%;
top: 19%;
left: 0;
border: 6px solid black; /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* transition for flipping label */
}
.iconicmenu ul { /* UL menu inside container */
margin: 0;
padding: 0;
position: absolute;
margin-left: 40px;
background: #eee;
left: -100%; /* hide menu intially */
height: 40px; /* height of menu */
font: bold 14px Verdana;
text-align: center;
list-style: none;
opacity: 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-moz-perspective: 10000px;
perspective: 10000px;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in; /* transition for animating UL in and out */
}
.iconicmenu li {
display: inline;
margin: 0;
padding: 0;
}
.iconicmenu ul label { /* label button inside UL to close menu */
cursor: pointer;
position: relative;
height: 100%;
text-align: center;
}
.iconicmenu ul label::after { /* label button x */
content: "x";
display: inline-block;
line-height: 14px;
color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 20px;
height: 20px;
background: black;
font-size: 18px;
margin: 5px;
margin-top: 10px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg); /* flip labels vertically onMouseover */
}
.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
border-color: darkred; /* highlight color of main menu label onMouseover */
}
.iconicmenu input[type="checkbox"]:checked ~ ul {
left: 8px; /* Animate menu into view */
opacity: 1;
-moz-box-shadow: 1px 1px 5px gray;
-webkit-box-shadow: 1px 1px 5px gray;
box-shadow: 1px 1px 5px gray;
}
.iconicmenu li a {
display: block;
float: left;
text-align: center;
text-decoration: none;
color: black;
margin: 0;
padding: 10px;
padding-right: 15px;
height: 100%;
}
.iconicmenu li a:hover {
background: black;
color: white;
}
/* ----------------------------- foulscode.com ----------------------------- */
@media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
.iconicmenu input[type="checkbox"]:checked ~ label {
display: none;
}
.iconicmenu input[type="checkbox"]:checked ~ ul {
margin-left: 0;
}
}
@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
.iconicmenu {
overflow: visible;
}
.iconicmenu ul {
height: auto;
}
.iconicmenu ul li {
min-width: 200px;;
display: block;
}
.iconicmenu ul li a {
float: none;;
text-align: left;
}
}
/* ----------------------------- CSS Media Queries ----------------------------- */
</style>
<!--[if lte IE 8]>
<style>
.iconicmenu > label{
border-width: 7px;
background: #eee;
}
.iconicmenu:hover ul{
left: 8px; /* show menu onmouseover in IE8 and below */
}
</style>
<![endif]-->
<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="http://www.foulscode.com">Home ></a></li>
<li><a href="http://www.foulscode.com">Home</a></li>
<li><a href="http://www.foulscode.com">Home</a></li>
<li><a href="http://www.foulscode.com">Home</a></li>
<li><a href="http://www.foulscode.com">Home</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>
Αντικαταστήστε τους συνδέσμων από τον κώδικα πριν την αποθήκευση και τους τίτλους του μενού και κάντε αποθήκευση!
Από [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
