25 Κάθετα "Navigation Menus" για blogger με CSS & HTML Codes
http://www.dr-blogger.com/2011/09/25-navigation-menus-blogger-css-html.html
Νέοι bloggers γεια σας !!!Στη προηγούμενη ανάρτηση, σας παρουσίασα μια ποικιλία από οριζόντια μενού...
Σήμερα θα δείτε, μια ποικιλία από κάθετα μενού, για να βάλετε στη πλαϊνή σας στήλη...
Μπαίνουν πανεύκολα στο blog σας και υπάρχουν εικόνες που σας καθοδηγούν και μπορείτε να δείτε
και demo στις εικόνες, με τα χρώματά τους....
1.Ολα αποτελούνται από 2 κώδικες...τον ένα, τον CSS ( που ευθύνεται για την διαφορετική εμφάνιση του
κάθε μενού) θα τον βάλετε (στη σελίδα Σχεδίαση => Επεξεργασία HTML ), ΠΡΙΝ τη φράση :
]]></b:skin>
2.Τον 2ο κώδικα HTML θα τον βάλετε στη πλαϊνή σας στήλη...
Εαν το βάλετε στη δεξιά θα βάλετε το κώδικα ΚΑΤΩ από τη φράση
<div id='sidebar-wrapper'> η <div id='sidebar-wrapper-right'>...
αν το βάλετε στην αριστερή, θα το βάλετε ΚΆΤΩ από τη φράση
<div id='sidebar-wrapper-left'>
...Βέβαια μπορείτε να το προσθέσετε σαν gadget στη πλαϊνή σας στήλη...
Αυτός ο κώδικας είναι κοινός σε όλα τα μενού και εσείς απλά θα βάλετε τα link (διευθυνσεις)
όπου έχει "#", και την ονομασία του όπου έχει τα πράσινα γράμματα ( Link 1, Link 2 κλπ)...
<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>
Εάν θέλετε περισσότερα η λιγότερα link, προσθέστε η αφαιρέστε τη φράση:
<li><a href="#" >Link </a></li>
ΔΕΙΤΕ DEMO
Navigation Menu #1
Navigation Menu 1
CSS CODE:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lGjNJf9xwEhc3ENpuTaXjdQ14dvCDRzZdoQdULcdB7ti9AUkHqkvEH-sirAJvxuxfkgfVoOXMXGREPVeTZ3Tat03bfK_G61TV5tTbkoRE5LHsybbHFHvy-dnXZD1HU6CPn0M_2HTVfM/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lGjNJf9xwEhc3ENpuTaXjdQ14dvCDRzZdoQdULcdB7ti9AUkHqkvEH-sirAJvxuxfkgfVoOXMXGREPVeTZ3Tat03bfK_G61TV5tTbkoRE5LHsybbHFHvy-dnXZD1HU6CPn0M_2HTVfM/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML CODE:
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #2
Navigation Menu 2
CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm88YQf_ojvdQsQCjBQ_GT1uwD1lBHe4_BmVGF3yooKEzz_bx5l8cGckwIBOmKNjDlUj5k18kFR8JbuINoWovawiGzB4NSxbA_pGiIupbTESwuZF-ThaH5auheYMEoHnYmyS51_3oF0hI/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm88YQf_ojvdQsQCjBQ_GT1uwD1lBHe4_BmVGF3yooKEzz_bx5l8cGckwIBOmKNjDlUj5k18kFR8JbuINoWovawiGzB4NSxbA_pGiIupbTESwuZF-ThaH5auheYMEoHnYmyS51_3oF0hI/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #3
Navigation Menu 3
CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhb3FjZ3u8U_gO1S_TFRgw8MfyYQv1IjiGXd-5vj60cTNECROMxm2sD5utPvFh6gOeFLIHInDAxM6UfFiFuCdEHTFBHxeJ8XwS_yzVXwAJ20lqvMyX6aTOjIrHwRhgl4w1sODB9Qp84c/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhb3FjZ3u8U_gO1S_TFRgw8MfyYQv1IjiGXd-5vj60cTNECROMxm2sD5utPvFh6gOeFLIHInDAxM6UfFiFuCdEHTFBHxeJ8XwS_yzVXwAJ20lqvMyX6aTOjIrHwRhgl4w1sODB9Qp84c/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #4
Navigation Menu 4
CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIDWqTifTQRgpQK0lvC08GF2JmutfYzITKC9kB_6Dzl3uvJafNekm7pu2JhPPAHA4BKnn8KNJdhgo6H5z23MIHEGQKo52fZGdCsCUHHWwTf2OR26LWa8QifOMwHKjjrjrkhIYhvk1REQ/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIDWqTifTQRgpQK0lvC08GF2JmutfYzITKC9kB_6Dzl3uvJafNekm7pu2JhPPAHA4BKnn8KNJdhgo6H5z23MIHEGQKo52fZGdCsCUHHWwTf2OR26LWa8QifOMwHKjjrjrkhIYhvk1REQ/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #5
Navigation Menu 5
CSS Code:
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNoO-TNLubNOQwzFiKsswmfi2map3YFoLU0Mg_JxiVYgikmpAayVueSA-q1dJa49AAnyHeqHhANb6UbWixF6ibqmavMnwrTQPh-79MB4GKcfWF8yUK9SOq9vv-IBzTQh9dS5f2gXQl7A/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNoO-TNLubNOQwzFiKsswmfi2map3YFoLU0Mg_JxiVYgikmpAayVueSA-q1dJa49AAnyHeqHhANb6UbWixF6ibqmavMnwrTQPh-79MB4GKcfWF8yUK9SOq9vv-IBzTQh9dS5f2gXQl7A/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Code:
<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #6
Navigation Menu 6
CSS Code:
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYCN5nuOhmAPmqUspyULceQWoQwobE591Wrb0Tht1asb5zjuQ3pcBxpv7sjYeHdbaVMRqEbHScA0mBFAzOgzLF3fnTqFUvL70Uk3Qy44bVVHfmhyThZicrKabWjbGnAdmqoUXwzqlATI/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYCN5nuOhmAPmqUspyULceQWoQwobE591Wrb0Tht1asb5zjuQ3pcBxpv7sjYeHdbaVMRqEbHScA0mBFAzOgzLF3fnTqFUvL70Uk3Qy44bVVHfmhyThZicrKabWjbGnAdmqoUXwzqlATI/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #7
Navigation Menu 7
CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #8
Navigation Menu 8
CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #9
Navigation Menu 9
CSS Code:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYuXZCLGDSXunlz4jrnyBDmOU-T8tY-LYBhNhhs-YGpU8Yf3P5BLDWWoSjYPgsNFPZkdPwL6r99NGp1XJ6LUvs4dInOoQmmIMwaSdbclnZ4EfSFrOy6bOsQaAA5jEENp-jd-w_hQYpyc/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYuXZCLGDSXunlz4jrnyBDmOU-T8tY-LYBhNhhs-YGpU8Yf3P5BLDWWoSjYPgsNFPZkdPwL6r99NGp1XJ6LUvs4dInOoQmmIMwaSdbclnZ4EfSFrOy6bOsQaAA5jEENp-jd-w_hQYpyc/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Code:
<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #10
Navigation Menu 10
CSS Code:
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPGXqt6uLnMkdF5h-qjBkUUDPw15YPOEJTnbRPZNF-TztU7xVAIcHZbHWUVkvBjQrYQYGdSomB7n7bNz7WKBv_hK9__-HhuJB_XfojwTAJ-V83jUChZNvoxjTglmSxkTtNlCfxYIuqHc/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPGXqt6uLnMkdF5h-qjBkUUDPw15YPOEJTnbRPZNF-TztU7xVAIcHZbHWUVkvBjQrYQYGdSomB7n7bNz7WKBv_hK9__-HhuJB_XfojwTAJ-V83jUChZNvoxjTglmSxkTtNlCfxYIuqHc/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #11
Navigation Menu 11
CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #12
Navigation-Menu-With-No-image-used
CSS Code:
#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #13
CSS Menu Tabs 13
CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #14
CSS Menu Tabs 14
CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcrcEJm1IPIZTQ4VhditH3GzIuVm9jezZjYI6b3sd5ViL7IWB5ZxCD8VMWj5-0-lirbsiw95RLPvifXqv8ocQf7-uR1tzQrQA0Tvim1mdLYedaE7xLa8RA-zduIZ1fHCYKz0bpUKhjyQ/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcrcEJm1IPIZTQ4VhditH3GzIuVm9jezZjYI6b3sd5ViL7IWB5ZxCD8VMWj5-0-lirbsiw95RLPvifXqv8ocQf7-uR1tzQrQA0Tvim1mdLYedaE7xLa8RA-zduIZ1fHCYKz0bpUKhjyQ/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #15
CSS Menu Tabs 15
CSS Code:
#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeZ__svBsVDpwgjpmqI0tj3MiUuA-okQLUGmUQ6CuZGM-jkOrE1hpHXHAUBv5FBHAP0WHO8h1wM6Hw1gaVGkhiuTkmpZHqQvSXxulEEsOVn2Rvo1vUNroJ_euijW2ql3Hr3Kk66MXizY/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeZ__svBsVDpwgjpmqI0tj3MiUuA-okQLUGmUQ6CuZGM-jkOrE1hpHXHAUBv5FBHAP0WHO8h1wM6Hw1gaVGkhiuTkmpZHqQvSXxulEEsOVn2Rvo1vUNroJ_euijW2ql3Hr3Kk66MXizY/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #16
CSS Menu Tabs 16
CSS Code:
#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #17
CSS Menu Tabs 17
CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9VNooMnU4a8baH-0fVP3w_C7XnvDQ2xt77enOVPr60w3P8jwhiF6hFMojcyi8SFcQdLsaHYwVkPjIBDyXK8uEErz2xo7FtoUD6t9jLaspMb_uq8ow-yueccfvOD3vVkeIwFE5mRTrEQ/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9VNooMnU4a8baH-0fVP3w_C7XnvDQ2xt77enOVPr60w3P8jwhiF6hFMojcyi8SFcQdLsaHYwVkPjIBDyXK8uEErz2xo7FtoUD6t9jLaspMb_uq8ow-yueccfvOD3vVkeIwFE5mRTrEQ/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #18
CSS Menu Tabs 18
CSS Code:
#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhw3-rpl-vckQxYNSXegF_S7FM6vkhyphenhyphenryNpqV33Hd1gql6KMK4O7c6Pfb9VVMYz-1sksJbQ5So-I5pkEdeqmKAPqyJUy5Aa8yak3UIezaZ6jecSjuGOhdBiWYSr4vLOZFhG-dFhiDiew/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhw3-rpl-vckQxYNSXegF_S7FM6vkhyphenhyphenryNpqV33Hd1gql6KMK4O7c6Pfb9VVMYz-1sksJbQ5So-I5pkEdeqmKAPqyJUy5Aa8yak3UIezaZ6jecSjuGOhdBiWYSr4vLOZFhG-dFhiDiew/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
HTML Code:
<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #19
CSS Menu Tabs 19
CSS Code:
#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
HTML Code:
<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #20
CSS Menu Tabs 20
CSS Code:
#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #21
CSS Menu Tabs 21
CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkRcI2f-oQ4k0iT7mohzgivdt96Cwb4KA1MFc1Zc0ywPStR7QzKNhYcRxaUicqetdhGm5WbF2ZoeGOHSrrAgem_JikG2aIspKsB4SqHaRFibPI6rgYchcqZjZIHzlNGm7nSYU5KePDdk/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkRcI2f-oQ4k0iT7mohzgivdt96Cwb4KA1MFc1Zc0ywPStR7QzKNhYcRxaUicqetdhGm5WbF2ZoeGOHSrrAgem_JikG2aIspKsB4SqHaRFibPI6rgYchcqZjZIHzlNGm7nSYU5KePDdk/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #22
CSS Menu Tabs 22
CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #23
CSS Menu Tabs 24
CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsZR-N-N1oxQNWGKRWgYEtB-O9cKXt7GUnjOyJs5998unMLejx3N0ojGaoK_ryFE3Ru1qRhZyEfBiOZChoOW4P_vQC9tBeqWcKsYWjKhii3HBajVYmG05A-try7Pf7mVGYeqh-dZ6I8U/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsZR-N-N1oxQNWGKRWgYEtB-O9cKXt7GUnjOyJs5998unMLejx3N0ojGaoK_ryFE3Ru1qRhZyEfBiOZChoOW4P_vQC9tBeqWcKsYWjKhii3HBajVYmG05A-try7Pf7mVGYeqh-dZ6I8U/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #24
CSS Menu Tabs 25
CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZZeOC7Fgt0JPrez_Ssd2uITsphGZETRIFVxEphCaJDYjobQ0y_kAfhyMbUpW-t0fOdk95eJPvYSYns6vUVyligd0eDip1OCjWPdK7IPfc8RubbP1pbU6eMZuA-NdZIsCJ8oOpljqYY0/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZZeOC7Fgt0JPrez_Ssd2uITsphGZETRIFVxEphCaJDYjobQ0y_kAfhyMbUpW-t0fOdk95eJPvYSYns6vUVyligd0eDip1OCjWPdK7IPfc8RubbP1pbU6eMZuA-NdZIsCJ8oOpljqYY0/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #25
CSS Menu Tabs 26
CSS Code:
#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFH1uq9bNpdKwUZvHqwXjiLakf1IBxLa9Nd1uA9mfQmPxefLT9BdiJiEN49WiRfaMIq0BEKgohaP-_JkeHTHCDSUkTDp9HWnwJA9q7xYekZXcdQ3R_lZZAim6yNJqlsy_CbbYRQW_l2sU/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFH1uq9bNpdKwUZvHqwXjiLakf1IBxLa9Nd1uA9mfQmPxefLT9BdiJiEN49WiRfaMIq0BEKgohaP-_JkeHTHCDSUkTDp9HWnwJA9q7xYekZXcdQ3R_lZZAim6yNJqlsy_CbbYRQW_l2sU/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
****ΜΗ ΞΕΧΑΣΕΤΕ ΝΑ ΠΑΤΑΤΕ "ΑΠΟΘΗΚΕΥΣΗ" ΚΑΘΕ ΦΟΡΑ ΠΟΥ ΤΕΛΕΙΩΝΕΤΕ ΜΕ ΕΝΑΝ ΚΩΔΙΚΑ.....
****Αν μετανοιώσετε, και θέλετε να αλλάξετε η να βγάλετε εναν κώδικα, πατήστε ctrl F και γράψτε ένα μικρό και μοναδικό κομμάτι του κώδικα, για να σας παρουσιάσει που βρίσκεται αυτός ο κώδικας....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
ΠΗΓΕΣ:
Thanks to http://24works.blogspot.com
Thanks to My Blogger Trick
Μετάφραση - Παρουσίαση στα ελληνικά: dr-blogger (pan de lees)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
You might also like:
http://www.dr-blogger.com/2011/09/25-navigation-menus-blogger-css-html.html
Νέοι bloggers γεια σας !!!Στη προηγούμενη ανάρτηση, σας παρουσίασα μια ποικιλία από οριζόντια μενού...
Σήμερα θα δείτε, μια ποικιλία από κάθετα μενού, για να βάλετε στη πλαϊνή σας στήλη...
Μπαίνουν πανεύκολα στο blog σας και υπάρχουν εικόνες που σας καθοδηγούν και μπορείτε να δείτε
και demo στις εικόνες, με τα χρώματά τους....
1.Ολα αποτελούνται από 2 κώδικες...τον ένα, τον CSS ( που ευθύνεται για την διαφορετική εμφάνιση του
κάθε μενού) θα τον βάλετε (στη σελίδα Σχεδίαση => Επεξεργασία HTML ), ΠΡΙΝ τη φράση :
]]></b:skin>
2.Τον 2ο κώδικα HTML θα τον βάλετε στη πλαϊνή σας στήλη...
Εαν το βάλετε στη δεξιά θα βάλετε το κώδικα ΚΑΤΩ από τη φράση
<div id='sidebar-wrapper'> η <div id='sidebar-wrapper-right'>...
αν το βάλετε στην αριστερή, θα το βάλετε ΚΆΤΩ από τη φράση
<div id='sidebar-wrapper-left'>
...Βέβαια μπορείτε να το προσθέσετε σαν gadget στη πλαϊνή σας στήλη...
Αυτός ο κώδικας είναι κοινός σε όλα τα μενού και εσείς απλά θα βάλετε τα link (διευθυνσεις)
όπου έχει "#", και την ονομασία του όπου έχει τα πράσινα γράμματα ( Link 1, Link 2 κλπ)...
<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>
Εάν θέλετε περισσότερα η λιγότερα link, προσθέστε η αφαιρέστε τη φράση:
<li><a href="#" >Link </a></li>
ΔΕΙΤΕ DEMO
Navigation Menu #1
Navigation Menu 1
CSS CODE:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lGjNJf9xwEhc3ENpuTaXjdQ14dvCDRzZdoQdULcdB7ti9AUkHqkvEH-sirAJvxuxfkgfVoOXMXGREPVeTZ3Tat03bfK_G61TV5tTbkoRE5LHsybbHFHvy-dnXZD1HU6CPn0M_2HTVfM/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lGjNJf9xwEhc3ENpuTaXjdQ14dvCDRzZdoQdULcdB7ti9AUkHqkvEH-sirAJvxuxfkgfVoOXMXGREPVeTZ3Tat03bfK_G61TV5tTbkoRE5LHsybbHFHvy-dnXZD1HU6CPn0M_2HTVfM/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML CODE:
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #2
Navigation Menu 2
CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm88YQf_ojvdQsQCjBQ_GT1uwD1lBHe4_BmVGF3yooKEzz_bx5l8cGckwIBOmKNjDlUj5k18kFR8JbuINoWovawiGzB4NSxbA_pGiIupbTESwuZF-ThaH5auheYMEoHnYmyS51_3oF0hI/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm88YQf_ojvdQsQCjBQ_GT1uwD1lBHe4_BmVGF3yooKEzz_bx5l8cGckwIBOmKNjDlUj5k18kFR8JbuINoWovawiGzB4NSxbA_pGiIupbTESwuZF-ThaH5auheYMEoHnYmyS51_3oF0hI/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #3
Navigation Menu 3
CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhb3FjZ3u8U_gO1S_TFRgw8MfyYQv1IjiGXd-5vj60cTNECROMxm2sD5utPvFh6gOeFLIHInDAxM6UfFiFuCdEHTFBHxeJ8XwS_yzVXwAJ20lqvMyX6aTOjIrHwRhgl4w1sODB9Qp84c/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhb3FjZ3u8U_gO1S_TFRgw8MfyYQv1IjiGXd-5vj60cTNECROMxm2sD5utPvFh6gOeFLIHInDAxM6UfFiFuCdEHTFBHxeJ8XwS_yzVXwAJ20lqvMyX6aTOjIrHwRhgl4w1sODB9Qp84c/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #4
Navigation Menu 4
CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIDWqTifTQRgpQK0lvC08GF2JmutfYzITKC9kB_6Dzl3uvJafNekm7pu2JhPPAHA4BKnn8KNJdhgo6H5z23MIHEGQKo52fZGdCsCUHHWwTf2OR26LWa8QifOMwHKjjrjrkhIYhvk1REQ/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIDWqTifTQRgpQK0lvC08GF2JmutfYzITKC9kB_6Dzl3uvJafNekm7pu2JhPPAHA4BKnn8KNJdhgo6H5z23MIHEGQKo52fZGdCsCUHHWwTf2OR26LWa8QifOMwHKjjrjrkhIYhvk1REQ/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #5
Navigation Menu 5
CSS Code:
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNoO-TNLubNOQwzFiKsswmfi2map3YFoLU0Mg_JxiVYgikmpAayVueSA-q1dJa49AAnyHeqHhANb6UbWixF6ibqmavMnwrTQPh-79MB4GKcfWF8yUK9SOq9vv-IBzTQh9dS5f2gXQl7A/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNoO-TNLubNOQwzFiKsswmfi2map3YFoLU0Mg_JxiVYgikmpAayVueSA-q1dJa49AAnyHeqHhANb6UbWixF6ibqmavMnwrTQPh-79MB4GKcfWF8yUK9SOq9vv-IBzTQh9dS5f2gXQl7A/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Code:
<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #6
Navigation Menu 6
CSS Code:
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYCN5nuOhmAPmqUspyULceQWoQwobE591Wrb0Tht1asb5zjuQ3pcBxpv7sjYeHdbaVMRqEbHScA0mBFAzOgzLF3fnTqFUvL70Uk3Qy44bVVHfmhyThZicrKabWjbGnAdmqoUXwzqlATI/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYCN5nuOhmAPmqUspyULceQWoQwobE591Wrb0Tht1asb5zjuQ3pcBxpv7sjYeHdbaVMRqEbHScA0mBFAzOgzLF3fnTqFUvL70Uk3Qy44bVVHfmhyThZicrKabWjbGnAdmqoUXwzqlATI/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #7
Navigation Menu 7
CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1XKyfsB6O7do-WNVdTw9oKfSGkXnLo2-LcOfSmRqfEZ9mdmBxLXWD5j_eJNpjDdYD5MRltqHuc2Fnyzz8qN5gDxC_2oIvCE7u5hzsH8q3vzmio9FU_8zCe8UKGyECz_MY17_PjVq0RA/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #8
Navigation Menu 8
CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn23VUNaKRj78lQ0sqMIL-3XsGYUHihQ2Q4SkTI3ObyvPYiYgkdueuDNbyyGgBRnw0PgXZ01JY9oo7ruhm8QFGOQK5Mm9me4vkXJJJu9FI-GVozil6yqy4TeE2OjV9PKyHhsArslLZjgQ/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #9
Navigation Menu 9
CSS Code:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYuXZCLGDSXunlz4jrnyBDmOU-T8tY-LYBhNhhs-YGpU8Yf3P5BLDWWoSjYPgsNFPZkdPwL6r99NGp1XJ6LUvs4dInOoQmmIMwaSdbclnZ4EfSFrOy6bOsQaAA5jEENp-jd-w_hQYpyc/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYuXZCLGDSXunlz4jrnyBDmOU-T8tY-LYBhNhhs-YGpU8Yf3P5BLDWWoSjYPgsNFPZkdPwL6r99NGp1XJ6LUvs4dInOoQmmIMwaSdbclnZ4EfSFrOy6bOsQaAA5jEENp-jd-w_hQYpyc/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Code:
<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #10
Navigation Menu 10
CSS Code:
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPGXqt6uLnMkdF5h-qjBkUUDPw15YPOEJTnbRPZNF-TztU7xVAIcHZbHWUVkvBjQrYQYGdSomB7n7bNz7WKBv_hK9__-HhuJB_XfojwTAJ-V83jUChZNvoxjTglmSxkTtNlCfxYIuqHc/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPGXqt6uLnMkdF5h-qjBkUUDPw15YPOEJTnbRPZNF-TztU7xVAIcHZbHWUVkvBjQrYQYGdSomB7n7bNz7WKBv_hK9__-HhuJB_XfojwTAJ-V83jUChZNvoxjTglmSxkTtNlCfxYIuqHc/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #11
Navigation Menu 11
CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_Yfs3VnXnXKNWBytWpeYGRDbQtq_akNuEU1f-8kNwSAb1WRKDcz3uzTLKgF8wfPvtXhEciyFDlHQLbfhNj1p5Ant7PvNmp8_ohw77p8CNoDyjEOSFx_W_rpZo2g3NBq7CeKkoyz42NE/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #12
Navigation-Menu-With-No-image-used
CSS Code:
#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #13
CSS Menu Tabs 13
CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1VtMs9iNq4of8vYvwxXVR8_nmJ-uJXS4asIq8Ezbx3AYu_rFA2IYeUzIYBKhdQwDJMxbHJvrnZ9fI1ovNis3zqBU8BzjZIwXaOFPK8zczcT8CNyIloBNuCtsoevTJz1-UNCyIeG4p3k/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #14
CSS Menu Tabs 14
CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcrcEJm1IPIZTQ4VhditH3GzIuVm9jezZjYI6b3sd5ViL7IWB5ZxCD8VMWj5-0-lirbsiw95RLPvifXqv8ocQf7-uR1tzQrQA0Tvim1mdLYedaE7xLa8RA-zduIZ1fHCYKz0bpUKhjyQ/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcrcEJm1IPIZTQ4VhditH3GzIuVm9jezZjYI6b3sd5ViL7IWB5ZxCD8VMWj5-0-lirbsiw95RLPvifXqv8ocQf7-uR1tzQrQA0Tvim1mdLYedaE7xLa8RA-zduIZ1fHCYKz0bpUKhjyQ/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #15
CSS Menu Tabs 15
CSS Code:
#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeZ__svBsVDpwgjpmqI0tj3MiUuA-okQLUGmUQ6CuZGM-jkOrE1hpHXHAUBv5FBHAP0WHO8h1wM6Hw1gaVGkhiuTkmpZHqQvSXxulEEsOVn2Rvo1vUNroJ_euijW2ql3Hr3Kk66MXizY/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeZ__svBsVDpwgjpmqI0tj3MiUuA-okQLUGmUQ6CuZGM-jkOrE1hpHXHAUBv5FBHAP0WHO8h1wM6Hw1gaVGkhiuTkmpZHqQvSXxulEEsOVn2Rvo1vUNroJ_euijW2ql3Hr3Kk66MXizY/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #16
CSS Menu Tabs 16
CSS Code:
#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #17
CSS Menu Tabs 17
CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9VNooMnU4a8baH-0fVP3w_C7XnvDQ2xt77enOVPr60w3P8jwhiF6hFMojcyi8SFcQdLsaHYwVkPjIBDyXK8uEErz2xo7FtoUD6t9jLaspMb_uq8ow-yueccfvOD3vVkeIwFE5mRTrEQ/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9VNooMnU4a8baH-0fVP3w_C7XnvDQ2xt77enOVPr60w3P8jwhiF6hFMojcyi8SFcQdLsaHYwVkPjIBDyXK8uEErz2xo7FtoUD6t9jLaspMb_uq8ow-yueccfvOD3vVkeIwFE5mRTrEQ/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #18
CSS Menu Tabs 18
CSS Code:
#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhw3-rpl-vckQxYNSXegF_S7FM6vkhyphenhyphenryNpqV33Hd1gql6KMK4O7c6Pfb9VVMYz-1sksJbQ5So-I5pkEdeqmKAPqyJUy5Aa8yak3UIezaZ6jecSjuGOhdBiWYSr4vLOZFhG-dFhiDiew/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhw3-rpl-vckQxYNSXegF_S7FM6vkhyphenhyphenryNpqV33Hd1gql6KMK4O7c6Pfb9VVMYz-1sksJbQ5So-I5pkEdeqmKAPqyJUy5Aa8yak3UIezaZ6jecSjuGOhdBiWYSr4vLOZFhG-dFhiDiew/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
HTML Code:
<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #19
CSS Menu Tabs 19
CSS Code:
#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
HTML Code:
<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #20
CSS Menu Tabs 20
CSS Code:
#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPkZy4Sd2eFYJral0iDztAVKeXQyVZIdwVAb3D5JjV-JpAYXFFm_W2h-o6VOE1MQVV_apEnCZPnYP7Dz-K84MVBqZTOsefSyFOTuWP-ofaWY1nWktjELjOaZO590ImIjCd4rykOqa-dc/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #21
CSS Menu Tabs 21
CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkRcI2f-oQ4k0iT7mohzgivdt96Cwb4KA1MFc1Zc0ywPStR7QzKNhYcRxaUicqetdhGm5WbF2ZoeGOHSrrAgem_JikG2aIspKsB4SqHaRFibPI6rgYchcqZjZIHzlNGm7nSYU5KePDdk/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkRcI2f-oQ4k0iT7mohzgivdt96Cwb4KA1MFc1Zc0ywPStR7QzKNhYcRxaUicqetdhGm5WbF2ZoeGOHSrrAgem_JikG2aIspKsB4SqHaRFibPI6rgYchcqZjZIHzlNGm7nSYU5KePDdk/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #22
CSS Menu Tabs 22
CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirQ5TGhil72z02wC20kOKgSXW6j9BMYOBPZtRcLEFIYQzY-OV0fL9pucFTpHgM0h8QCUIkg5D1GTPMsTMFBrJ7Bdjh8xoZAqXADPgiVmUVXtQ3E_jh23MtRaxLJcqjVTIn7Lv_ePDxwY/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #23
CSS Menu Tabs 24
CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsZR-N-N1oxQNWGKRWgYEtB-O9cKXt7GUnjOyJs5998unMLejx3N0ojGaoK_ryFE3Ru1qRhZyEfBiOZChoOW4P_vQC9tBeqWcKsYWjKhii3HBajVYmG05A-try7Pf7mVGYeqh-dZ6I8U/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsZR-N-N1oxQNWGKRWgYEtB-O9cKXt7GUnjOyJs5998unMLejx3N0ojGaoK_ryFE3Ru1qRhZyEfBiOZChoOW4P_vQC9tBeqWcKsYWjKhii3HBajVYmG05A-try7Pf7mVGYeqh-dZ6I8U/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #24
CSS Menu Tabs 25
CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZZeOC7Fgt0JPrez_Ssd2uITsphGZETRIFVxEphCaJDYjobQ0y_kAfhyMbUpW-t0fOdk95eJPvYSYns6vUVyligd0eDip1OCjWPdK7IPfc8RubbP1pbU6eMZuA-NdZIsCJ8oOpljqYY0/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZZeOC7Fgt0JPrez_Ssd2uITsphGZETRIFVxEphCaJDYjobQ0y_kAfhyMbUpW-t0fOdk95eJPvYSYns6vUVyligd0eDip1OCjWPdK7IPfc8RubbP1pbU6eMZuA-NdZIsCJ8oOpljqYY0/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #25
CSS Menu Tabs 26
CSS Code:
#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFH1uq9bNpdKwUZvHqwXjiLakf1IBxLa9Nd1uA9mfQmPxefLT9BdiJiEN49WiRfaMIq0BEKgohaP-_JkeHTHCDSUkTDp9HWnwJA9q7xYekZXcdQ3R_lZZAim6yNJqlsy_CbbYRQW_l2sU/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFH1uq9bNpdKwUZvHqwXjiLakf1IBxLa9Nd1uA9mfQmPxefLT9BdiJiEN49WiRfaMIq0BEKgohaP-_JkeHTHCDSUkTDp9HWnwJA9q7xYekZXcdQ3R_lZZAim6yNJqlsy_CbbYRQW_l2sU/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
****ΜΗ ΞΕΧΑΣΕΤΕ ΝΑ ΠΑΤΑΤΕ "ΑΠΟΘΗΚΕΥΣΗ" ΚΑΘΕ ΦΟΡΑ ΠΟΥ ΤΕΛΕΙΩΝΕΤΕ ΜΕ ΕΝΑΝ ΚΩΔΙΚΑ.....
****Αν μετανοιώσετε, και θέλετε να αλλάξετε η να βγάλετε εναν κώδικα, πατήστε ctrl F και γράψτε ένα μικρό και μοναδικό κομμάτι του κώδικα, για να σας παρουσιάσει που βρίσκεται αυτός ο κώδικας....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
ΠΗΓΕΣ:
Thanks to http://24works.blogspot.com
Thanks to My Blogger Trick
Μετάφραση - Παρουσίαση στα ελληνικά: dr-blogger (pan de lees)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
You might also like:
