-->
Κάλως ήρθατε στην ιστοσελίδα μου!
Searching...
Home » Blogger » Computer Tutorials » Gadgets For Blogger » Tips And Tricks » Tutorials » Πως να προσθεσετε CSS3 dropdown μενου στο blogger blog σας

Πως να προσθεσετε CSS3 dropdown μενου στο blogger blog σας

8:13:00 π.μ.

οριζόντιο μενού

Σε αυτό το post σας έχω ένα ακόμα καταπληκτικό μενού φτιαγμένο με css3 το οποίο μπορείτε να προσθέσετε στο blog σας αρκετά εύκολα.
Στην δεξιά πάνω μεριά του μενού υπάρχουν μερικά έξτρα πραγματάκια εκτός του μενού. Είναι ένας σύνδεσμος "About" άλλος ένας για την επικοινωνία και κουμπάκια κοινωνικών δικτύων του Facebook, Twitter, Google Plus και RSS feed. Επίσης μετά από τις καρτέλες του μενού δεξιά υπάρχει και ένα κουτάκι αναζήτησης.
Για να επιτευχθεί καλύτερη διεπαφή του χρήστη με το blog σας, το μενού διαθέτει υποκατηγορίες που εμφανίζονται με μια ωραία πινελιά από CSS3.

 

Με την κατάλληλη παραμετροποίηση εννοείτε ότι μπορεί να προστεθεί σε όποιο site έχετε! Εγώ πιο κάτω δείχνω την διαδικασία προσθήκης του μενού στην πλατφόρμα του blogger για ένα blogspot blog.

Προσθήκη του CSS3 dropdown menu στο blogger με 5 απλά βήματα
Βήμα 1. Συνδεθείτε στο λογαριασμό σας στο blogger και από τις ρυθμίσεις του blog σας πηγαίνετε στο Πρότυπο και πατήστε στο κουμπί Επεξεργασία HTML όπως φαίνεται και πιο κάτω εικόνα

Βήμα 2. Κάντε κλικ οπουδήποτε μέσα στο κώδικα και πιέστε τα πλήκτρα CTRL + F για να ανοίξει το κουτάκι αναζήτησης. Πληκτρολογήστε μέσα στο κουτί αναζήτησης το παρακάτω tag και πατήστε Enter για να το βρείτε.

</header>

Βήμα 3. Ακριβώς κάτω από το </header> προσθέστε την πιο κάτω HTML δομή:

<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Επικοινωνία</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK72l4njkxxsifFF3B7c7_mJ8JjVg6fUET-FS46jFwmyILCpRMPIDq53Y7YKFckq72Q1Z_Z6CT_srHM8TLXWIDt2RjQ-278fjp3kXMsGt1cqmvg2R1gaA9p5LN3N8bmWtHLvMJ1siU8tc5/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOubcYUkd1FphxQg1X9ficyppP-yhsu_Dzwn074RbPFpUOhneUiAFB3JfRm1o0DoQdCeeKJMnnozVUAGYhPvu3n3pTEZHZgMuZkPb5sBLQJEmPH2-FFWDWQckV5JrE-ZUmW9fUr9kJfq8/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQhvf2ZNTdmCs_uZjmMdRGdxZcU4ve4iF57EQyOjQaX-rLaSuiH9QCwYHp7CSeQEMZmXBCtbxzUda0h9g9gc4_-sXN5ZsihFjk4xbzqyC8eSg58gw6AXxfydWUr1zutxNGUS8M0HHuNnpj/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSevgNx_Xp29V8S-9qDrEJoR7aVRqe6cUeZ-_vMV0C-8fEu3AB2LItGIx4UMI0dR-R8iTfm2x09L_Yl1DxruS3aFOa38WrnxeT2Ihww2mA8y9bA56NraTlDA82gvhe7EerDSTZYCphC-d/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Αρχική</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='Αναζήτηση...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

Αντικαταστήστε τα σύμβολα # με τις διευθύνσεις URL των συνδέσμων σας και αντικαταστήστε τα κείμενα που είναι σε μπλε χρώμα με τους τίτλους που θέλετε να εμφανίζονται ως σύνδεσμοι του μενού.
Αν θέλετε να αφαιρέσετε τις  υποκατηγορίες, αφαιρέστε τον κώδικα μέσα στις ετικέτες που είναι με κίτρινο χρώμα, συμπεριλαμβανομένων και των <ul> ετικετών. Για να αφαιρέσετε μόνο ένα στοιχείο μενού, αφαιρέστε το κομμάτι που αρχίζει με <li> και τελειώνει με </li>
Στο παρακάτω βήμα (βήμα 4) μπορείτε να προσθέσετε ένα από τους 3 διαφορετικούς κώδικες ανάλογα με τα χρώματα που θέλετε.
Βήμα 4. Και τώρα ας προσθέσουμε το στυλ του μενού, δηλαδή το CSS. Πατήστε όπως και πριν τα πλήκτρα CTRL + F και ψάξτε για το πιο κάτω κομμάτι του κώδικα.

]]></b:skin>

Βάλτε το ακριβώς από πάνω από το ]]></b:skin> προσθέστε τον πιο κάτω κώδικα
1ο στυλ χρωμάτων

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #FF2A2A;
}
#contact-links a:hover {
    color: #FF2A2A;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #FF2A2A inset, 1px 0 0 #FF2A2A inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #FF2A2A;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #FF2A2A;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-top: 1px solid #FF2A2A;
    box-shadow: -1px 0 0 #FF2A2A inset, 1px 0 0 #FF2A2A inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE7zfNqYc-6lmA9fJNWK4TuwHPy_ambrqfcCZeCGrRP7OSuMM9lBqvZg2NOOKeKgqsjHXPPYfXMlL1fx1MK89a1gZaaeZFr8XQj7x7url_VhlsjfDI1z-a_1OUPvT3KD19OmK7XHJsgaA/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #FF2A2A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #FF2A2A;
}

2ο στυλ χρωμάτων 

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE7zfNqYc-6lmA9fJNWK4TuwHPy_ambrqfcCZeCGrRP7OSuMM9lBqvZg2NOOKeKgqsjHXPPYfXMlL1fx1MK89a1gZaaeZFr8XQj7x7url_VhlsjfDI1z-a_1OUPvT3KD19OmK7XHJsgaA/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}

3ο στυλ χρωμάτων

#contact-links { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); margin: auto; position: relative; width: 100%; } #contact-links a { color: green; } #contact-links a:hover { color: green; } #my-links { float: right; font-size: 12px; margin: 4px 10px; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; } #my-links a { margin-left: 7px; padding-left: 8px; text-decoration: none; } #my-links a:first-child { border-width: 0; } #menu-container { background: -webkit-linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF1FFF', endColorstr='#e9eaea',GradientType=0 ); border-radius: 0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; clear: both; height: 46px; padding-top: 1px; } #neat-menu { float: left; } #neat-menu a { text-decoration: none; } #neat-menu ul { list-style: none; margin: 0; padding: 0; } #neat-menu > ul > li { float: left; padding-bottom: 12px; } #neat-menu ul li a { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; border-color: #D1D1D1; border-image: none; border-style: solid; border-width: 0 1px 0 0; color: #333333; display: block; font-size: 14px; height: 25px; line-height: 25px; padding: 11px 15px 10px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-bottom: 1px solid #2D81CC; border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #000000 inset, 1px 0 0 #000000 inset; color: #FFFFFF; margin: -1px 0 -1px -1px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu > ul > li.active > a:hover { background: -webkit-linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; background: linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); } #neat-menu > ul > li:first-child > a { border-radius: 0 0 0 5px; } #neat-menu ul ul { background: -webkit-linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; background: -moz-linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; background: linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); border-radius: 5px 5px 5px 5px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 #FFFFFF inset; height: 0; margin-top: 1px; opacity: 0; overflow: hidden; width: 240px; padding: 0; position: absolute; visibility: hidden; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #neat-menu ul li:hover ul { margin-top: 0\2; height: auto; opacity: 1; visibility: visible; } #neat-menu ul ul a { border-right-width: 0; border-top: 1px solid #D1D1D1; box-shadow: 0 1px 0 #FFFFFF inset; color: #444444; height: 24px; line-height: 24px; padding: 7px 12px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu ul ul li:first-child a { border-top-width: 0; } #menu-search { margin:8px 10px 0 0; float: right; } #menu-search form { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE7zfNqYc-6lmA9fJNWK4TuwHPy_ambrqfcCZeCGrRP7OSuMM9lBqvZg2NOOKeKgqsjHXPPYfXMlL1fx1MK89a1gZaaeZFr8XQj7x7url_VhlsjfDI1z-a_1OUPvT3KD19OmK7XHJsgaA/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF; height: 26px; padding: 0 25px; position: relative; width: 130px; } #menu-search form:hover { background-color: #F9F9F9; } #menu-search form input { color: #999999; font-size: 13px; height: 26px; text-shadow: 0 1px 0 #FFFFFF; background: none repeat scroll 0 0 transparent; border: medium none; float: left; outline: medium none; padding: 0; width: 100%; } #menu-search form input.placeholder, #menu-search form input:-moz-placeholder { color: #C4C4C4; }

Βήμα 5. Κάντε κλικ στο κουμπί Αποθήκευση προτύπου για να αποθηκευτούν οι αλλαγές.. και τελειώσατε!
Ελπίζω να σας αρέσει αυτό το μενού με CSS3. Αν σας άρεσε, κάντε μια δημοσίευση να το δουν και οι φίλοι σας είναι δωρεάν μην τσιγκουνευεστε ;)

Ετικέτες , , , ,
Share:
Next
This is the most recent post.
 Παλαιότερη Ανάρτηση

0 σχόλια:

Δημοσίευση σχολίου

Εγγραφή σε: Σχόλια ανάρτησης (Atom)