Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Animated popup menu

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Δευ Απρ 24, 2017 11:23 am

Animated popup menu %25CE%25A3%25CF%2584%25CE%25B9%25CE%25B3%25CE%25BC%25CE%25B9%25CE%25BF%25CC%2581%25CF%2584%25CF%2585%25CF%2580%25CE%25BF%2B2017-01-01%252C%2B8.57.32%2B%25CE%25BC.%25CE%25BC.

Ένα καταπληκτικό menu γραμμένο με html και css.
Σας ντίνο τον παρακάτω κώδικα η αλλαγές είναι δικέ σας, υπάρχει live demo στο τέλος του θέματος!

Κώδικας:

 <style>
  /* www.greekport.com */
  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }

body {
    font-family:Tahoma, sans-serif;
    font-size: 12px;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu li {
    display: inline-block;
    margin: 20px;
}

#menu li a {
    border-radius: 3px;
    padding: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 /* www.foulscode.com */
#menu li a:hover { border-color: #fff; }

#menu li a i {
    margin-right: 5px;
    font-size: 24px;
}

#toggle-nav-label {
    color: #fff;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 500;
    width: 100px;
    height: 30px;
    border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box {
    opacity: 1;
    z-index: 400;
}

#toggle-nav:checked ~ .box ul {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label {
    background: #fff;
    color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
    margin-bottom: 20px;
    font-size: 30px;
}

#content p {
    font-size: 14px;
    /* www.greekport.com */
</style>
<header id="head">
  <div class="container">
  <nav id="menu">
             
    <input type="checkbox" id="toggle-nav"/>
    <label id="toggle-nav-label" for="toggle-nav">
    <i class="icon-reorder">Меню</i></label>
             
    <div class="box">
    <ul>
    <li><a href="URL"><i class="icon-home"></i>TEXT</a></li>
    <li><a href="URL"><i class="icon-file-alt"></i>TEXT</a></li>
    <li><a href="URL"><i class="icon-copy"></i>TEXT</a></li>
    <li><a href="URL"><i class="icon-envelope"></i>TEXT</a></li>
    </ul>
    </div>         
  </nav>
  </div>
</header>

<!-- start content -->
    <section id="content">
        <div class="container">
         
<!-- end content -->

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης