Πώς να προσθέσετε CSS3 dropdown μενού στο blogger blog σας

Πάει καιρός που σας έδωσα αυτό το όμορφο μενού => click4money.gr/2013/08/orizontio-menou-me-koutaki-anazhthshs.html. Σε αυτό το post σας έχω ένα ακόμα καταπληκτικό μενού φτιαγμένο με css3 το οποίο μπορείτε να προσθέσετε στο blog σας αρκετά εύκολα.

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

Για να επιτευχθεί καλύτερη διεπαφή του χρήστη με το blog σας, το μενού διαθέτει υποκατηγορίες που εμφανίζονται με μια ωραία πινελιά από CSS3.
DEMO

Με την κατάλληλη παραμετροποίηση εννοείτε ότι μπορεί να προστεθεί σε όποιο 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/AVvXsEhtJsQv9HXFNIektmj9LU5sIqxRMP9OtVwkAxLAZneVUeN5Y_Z0KJTBBQmpVyM6YLewhh0DKMmRpkVZhmmFwzkewv_M8yYpw1LETcv9MM6wJ_7qBkJkuRdn8bLNPt5cEtiMSqMvaNW-qIMc/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMKfsMm60G71l2O7xlz19mW0QugIktsPQB5LkY6feXD6-T73X_tb9JLE_Ka1RJjqda9GMmfLq6JNFxOMLm5sqDdmp7eWZqVP3ftkUUTTMRONVOjySWndAWnojulgxK0E07fnU5Es24Lff/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy321Bdz4bYo74n0BNgZ2-ZkaAE3eDaNDmKnuedRagQAnnyF9yMQpCDs1xSvcEFkMDiRpLYcLMakEPGIUiuScNxwIGaeWa9Py9TTiSI0ZCQexBIwBSRVG9h0SWEq7-A3pv0k-LU4ZrWv0_/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORJ-rAJUdnx0QdWWenc0W9oUrP5Gto59_pVplqpNEYUupCTV5R9tOBSJmV0Q6OwVjVX8nxq77BgeaP17hMDEoJZAI589JhAilGl-_rls-jdlwjmMr2iPxxXUQGVbONopzMHnAWHSaDqYe/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>

Αν θέλετε το μενού σας να έχει ίδια χρώματα με αυτό του demo ακριβώς από πάνω από το ]]></b:skin> προσθέστε τον πιο κάτω κώδικα
Ίδια χρώματα με του DEMO (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/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/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/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/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/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/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. Αν σας άρεσε, κάντε μια δημοσίευση να το δουν και οι φίλοι σας είναι δωρεάν μην τσιγκουνευεστε ;)

Εγκατάσταση backtrack στα windows με βοήθεια εικονικής μηχανής

Καλησπέρα φίλοι μου, σήμερα σας έχω φτιάξει το βίντεο που μου ζητήσατε κάποιοι που είχατε δυσκολίες στην εγκατάσταση του backtrack σε εικονική μηχανή για να τρέχουνε στα windows. Είναι πάρα πολύ απλό, θα το δείτε στην συνέχεια στο video. Την εικονική μηχανή που έχω και εγώ για να τρέχουνε τα backtrack στα windows: Κατεβάστε την εδώ . Τα Backtrack τα κατεβάζετε από εδώ . Κατεβάστε την τελευταία έκδοση δηλαδή το backtrack 5 R3. Επίσης σας έχω και μια εναλλακτική λύση εικονικής μηχανής που θα δείτε κάτω από το βίντεο, όπου μπορείτε να δείτε οδηγίες για να κατεβάσετε και να τρέξετε το backtrack στο virtualbox της oracle. Εγκατάσταση backtrack σε εικονική μηχανή - Δείτε τον οδηγό βίντεο Μπορείτε αν θέλετε να κατεβάσετε την εικονική μηχανή (virtualbox) της oracle που είναι επίσης πολύ καλή και είναι δωρεάν. Κατεβάστε την από εδώ https://www.virtualbox.org/wiki/Downloads . Όταν κατεβεί το κάνετε εγκατάσταση και δημιουργείτε μια εικονική μηχανή στο virtualbox της

Διαβάστε περισσότερα

lefta4klik - Blogger widgets, tricks, tips & hacks

Αναζήτηση αυτού του ιστολογίου