Membuat Menu Dropdown Menggunakan CSS3 - Hallo sahabat Alice Blogger, Pada Artikel yang anda baca kali ini dengan judul Membuat Menu Dropdown Menggunakan CSS3, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel BLOGER,
Artikel CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Menu Dropdown Menggunakan CSS3
link : Membuat Menu Dropdown Menggunakan CSS3
Step 1. Access Dashboard Blog Template Edit HTML
Step 2. CTRL+F Search </header>
Step 3.Letakan kode di bawah ini tepat di bawah </header>
Kemudian ganti symbol # dengan URLs milik Anda
Step 4. letakan kode CSS berikut di atas ]]></b:skin>
Step 5. Klik Save
Anda baru saja membaca Artikel Membuat Menu Dropdown Menggunakan CSS3, Semoga bermanfaat
Anda sekarang membaca artikel Membuat Menu Dropdown Menggunakan CSS3 dengan alamat link https://www.alicewinklers-blogku.eu.org/2015/09/membuat-menu-dropdown-menggunakan-css3.html
Judul : Membuat Menu Dropdown Menggunakan CSS3
link : Membuat Menu Dropdown Menggunakan CSS3
Membuat Menu Dropdown Menggunakan CSS3
Membuat Navigasi Menu di Bloger menggunakan CSS
 |
| Membuat Navigasi Menu di Bloger |
Step 1. Access Dashboard Blog Template Edit HTML
Step 2. CTRL+F Search </header>
Step 3.Letakan kode di bawah ini tepat di bawah </header>
<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdfUXsNmzkVyH38mGBkevqE-70AYiEDyuDGV1Whm3fZuVz9Pdh3SU_ikcKM9mbRXAC_ggBtLb5ApvMk_b4TRgfSUEqZm1w61cx09U0_M8IZ_YzDHSv-2M6cQ5oxaHkexs5R-lMrvER2wC/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT9wAxTqs-pBN7Au5G4LGl_l_79M6cBcqhLEHNVhvf1msnxZlwnQ3zfPXfB-4VhMb_7c8LYFwZMph3WjBQVpK5iU-K0hfK1EktziL08jbW-FTHrmxKcUT9dLcntv_iW1u3NYjQeS1hFKBe/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidSqO1BpaOl8Zzcif3HBTZLVSXvT4AwVqbgvEwBMULciVOvqgb7q_OKjiQL9r_lKdamHtvd8I1G-wjU3h0XD5srVgvoBiTH7PJOzSFMtNQ1Cs0ptWo6Hl4Ys8G8AjmYGPXR6cttBftZKyX/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQEGcAyhCQSvPS27E6TKUg3Ky8xKGGAPKN9u9ss5NVi-6iTQyo55SxqEj4PhqLEjSj58sdwfsopUHbKmk79mxYNkwlhawA-hrjlYXqv0YfG0mhqMUAzH1u-o_eJlXKw-xBk0SCRFdGqPC/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='/'>Home</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='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
Kemudian ganti symbol # dengan URLs milik Anda
Step 4. letakan kode CSS berikut di atas ]]></b:skin>
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #1E90FF;
}
#contact-links a:hover {
color: #FF7F50 ;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FF1000;
}
#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(#00BFFF, #87CEFA) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#00BFFF, #87CEFA) repeat scroll 0 0 transparent;
background: linear-gradient(#00BFFF, #87CEFA) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BFFF', endColorstr='#87CEFA',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 #0000CD;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #0000CD) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #0000CD) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #0000CD) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#0000CD',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #0000CD) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #0000CD) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #0000CD) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#0000CD',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(#87CEEB, #1E90FF ) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#87CEEB, #1E90FF ) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#87CEEB, #1E90FF ) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87CEEB', endColorstr='#1E90FF ',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #1E90FF 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 #0000FF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FF1000 ;
}
#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/AVvXsEh2y2Lj2icMwXlvnWBtoNt-fy35CwDS6bHNaD0Q6g1B4yMczijvZkV7TZDjDPSqDbTuAOonWqCbnKiAYndCo1zB8fhR22LNLVwMvjP0hYVaOurcZ-mVWxBXxO-JQXhkmY6O3ptFyyWbHAk/s1600/search_button.png") no-repeat scroll 5% 50% transparent;
border: 1px solid #0000CD;
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: #000000;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #000000;
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;
Step 5. Klik Save
Anda baru saja membaca Artikel Membuat Menu Dropdown Menggunakan CSS3, Semoga bermanfaat
Demikianlah Artikel Membuat Menu Dropdown Menggunakan CSS3
Sekianlah artikel Membuat Menu Dropdown Menggunakan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Menu Dropdown Menggunakan CSS3 dengan alamat link https://www.alicewinklers-blogku.eu.org/2015/09/membuat-menu-dropdown-menggunakan-css3.html