Multi-Level Dropline Menu Tabs

 

Αυτές οι καρτέλες CSS μόνο Dropline υποστηρίζουν απεριόριστα επίπεδα υπομενού.

 Ο μετασχηματισμός CSS3 προσθέτει ένα ωραίο αποτέλεσμα "fold in" για να αποκαλύψει τα δευτερεύοντα μενού.

Σχετικά με το σημαντικό θέμα της υποστήριξης του προγράμματος περιήγησης, οι καρτέλες μενού Dropline λειτουργούν σε όλα τα σύγχρονα και κινητά προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9 +.


[ LIVE DEMO ]


Αντιγραφή επικόλληση τον παρακάτω κώδικα αφού πρώτα τοποθετήσετε τα δικά σας URL και τους τίτλους στο Menu.





Εμφάνιση αναρτήσεων με ετικέτα Widget. Εμφάνιση όλων των αναρτήσεων


<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">

<style>

.droplinetabs{
    position: relative;
    background: white;
    text-align: left; /* set to left, center, or right */
    font: bold 16px 'Bitter', sans-serif; /* use google font */
}

.droplinetabs *{
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.droplinetabs a{
    text-decoration: none;
    color: black;
    display: inline-block;
    font-weight: bold;
    padding: 12px;
    position: relative;
}

.droplinetabs, .droplinetabs ul{
    list-style: none;
    margin: 0;
    padding: 0;
-webkit-perspective: 1000px;
perspective: 1000px;
    -webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
}

/* Top Level LI style */
.droplinetabs > li{
}

/* Top Level link style FoulsCode.com */
.droplinetabs > li > a{
    border-radius: 10px 10px 0 0;
    background: #BADBF2;
    text-transform: uppercase;
}

/* Top Level link style on hover and when active */
.droplinetabs li:hover > a {
    background: #dae9f4;
}

.droplinetabs li{
    display: inline;
}

/* drop line ULs style */
.droplinetabs ul{
    background: #f8ecc9;
    position: absolute;
    left: -5000px;
    width: 100%;
    opacity: 0;
    padding: 10px 0;
    top: auto;
    border: 1px solid #ddd;
    box-shadow: 0 3px 5px #eee;
    -webkit-transform: rotateX(-70deg);
    transform: rotateX(-70deg);
    backface-visibility: hidden;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition: opacity .3s, -webkit-transform .5s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
}

/* Reveal sub menu on hover */
.droplinetabs li:hover > ul{
    opacity: 1;
    left: 0;
    top: auto;
    z-index: 1000;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
}

.droplinetabs ul li{
    display: inline;
}

/* Sub Levels link style on hover and when active */

.droplinetabs ul li:hover > a {
    background: #f9d423;
    border-radius: 10px;
}

/* LIs with a sub UL style */
.droplinetabs li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 30px;
}

/* ####### FoulsCode.com ####### */
.droplinetabs li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 15px;
}


/* Arrow for LIs with sub ULs */
.droplinetabs li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: black;
    top: 45%;
    right: 8px;
}


/* LIs with NO sub UL pseudo class */
.droplinetabs li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}

/* ####### FoulsCode.com ####### */

@media (max-width: 720px) {
/* Top Level link style */
    .droplinetabs > li > a{
       border-radius: 0;
       margin-top: 5px;
    }
 
}

</style>