Dropdown Menu Simple Untuk CSS Desktop MyWapBlog

Post oleh : Fitz Freedom | Rilis : 08.32 | Series : Code CSS Code HTML CSS Desktop MyWapBlog Mobility TheMissingPiece

Screenshot Dropdown Menu Header

 

Dropdown Menu Posisi Atas

Screenshots Dropdown Menu Footer

Dropdown Menu Posisi Bawah

Penampakan pemakaian CSS Dropdown Menu Simple ini dapat kamu lihat di blog saya di  http://fitzfreedom.mywapblog.com

Untuk para pengguna situs bulding flatpon www.mywapblog.com dimana berada, dikesempatan ini saya akan berbagi Script CSS Dropdown Menu Simple dan Code HTML untuk CSS Desktop MyWapBlog. Script CSS ini sudah saya uji nyali (uji coba) untuk Type TheMissingPiece dan Mobility, tidak menutup kemungkinan bisa kamu kreasikan untuk Type CSS Desktop MWB lainnya.

Dropdown Menu ini berpengaruh terhadap Sidebar LI MWB yang sudah terpasang di blog kamu, silakan kamu modif kembali agar pemakaian Dropdown Menu yang saya bagikan ini berjalan dengan baik. Agar Propesional Blogging terlihat sempurna dan dinamis seperti Blog ternama lainnya.

Ada 2 CSS Dropdown Menu yang saya bagikan dalam Posisi Tetap (Fixed) yaitu:
CSS Dropdown Menu untuk posisi ATAS (Diatas Selector Header)
CSS Dropdown Menu untuk posisi BAWAH (Dibawah Selector Footer)

Kalau ada yang berminat untuk memasang Script CSS Dropdown Menu Simple ini, silakan kamu Copy Scriptnya dan letakan didalam CSS Desktop yang kamu pakai saat ini.

Untuk Code HTMLnya, silakan Copy juga dan kamu letakan di Navigasi Blog MWB kamu.
Cara pasang Code HTML dapat kamu baca diakhir Postingan ini.

---

Tanda panah berwarna HITAM adalah Posisi Dropdown Menu Simple, dan posisinya tidak bergerak sebab saya format pada posisi FIXED (Tetap)

Untuk menambah Sub Menu LINK, kamu bisa menambakan code HTML sebagai berikut:

Sub Menu Bercabang,

<li><a href="#">Nama Menu A</a>
<ul>
<li><a href="Link-Menu-1">Menu-1</a></li>
<li><a href="Link-Menu-2">Menu-2</a></li>
<li><a href="Link-Menu-3">Menu-3</a></li>
</ul>
</li>

Re-Design Modif By Fitz Freedom

Screenshot Dropdown Menu Header:

CODE CSS

.navtop{position:fixed;top:0;left:0;right:0;margin:0 auto!important;width:1000px!important;box-shadow:0 5px 12px rgba(0,0,0,.7);background:#025791!important;border:1px solid #555!important;border-radius:0 0 20px 20px}.nav li,.navtop .current a,.navtop a,.navtop li:hover>a,.navtop ul,.navtop ul li a:hover{margin:0!important}.navtop li{float:left;position:relative;border-bottom:none!important}.navtop a{display:block;padding:15px 20px!important;text-shadow:0 1px 2px #000;color:#fff!important}.navtop li:hover>a{background:0 0!important;color:#f80!important}.navtop .current a{background:0 0!important;color:#fff!important}.navtop ul{background:#fff!important;padding:0!important;width:170px;position:absolute;top:50px;left:-9999px;border:1px solid #555!important}.navtop li:hover>ul,body:after{display:block;left:0}.navtop ul li{float:none}.navtop ul li a{color:#000!important;font-weight:400;padding:10px!important}.navtop ul li a:hover{background:#3c5b99!important;color:#fff!important}

CODE HTML

<ul class="navtop"> <li class="current"><a href="URL1">Nama Link-1</a></li> <li><a href="URL2">Nama Link-2</a></li> <li><a href="URL3">Nama Link-3</a></li> <li><a href="URL4">Nama Link-4</a></li> <li><a href="URL5">Nama Link-5</a></li> <li><a href="URL6">Nama Link-6</a></li> <li><a href="URL7">Nama Link-7</a></li> <li><a href="URL8">Nama Link-8</a></li> <li><a href="#">Nama Menu</a> <ul> <li><a href="Link-Menu-1">Menu-1</a></li> <li><a href="Link-Menu-2">Menu-2</a></li> <li><a href="Link-Menu-3">Menu-3</a></li> </ul> </li> </ul>

---

Tanda panah berwarna MERAH adalah Posisi Dropdown Menu Simple, dan posisinya tidak bergerak sebab saya format pada posisi FIXED (Tetap).

Screenshot Dropdown Menu Footer:

CODE CSS

.nav-bot,.nav-bot li{padding:0!important}.post img{transition:width 2s,height 2s,transform 2s}.nav-bot li,.nav-bot ul li a{transition:all .7s ease-in-out}.nav-bot{position:fixed;bottom:0;left:0;right:0;margin:0 auto!important;width:1000px!important;box-shadow:0 5px 12px rgba(0,0,0,.7);background:#025791!important;border:1px solid #555!important}.nav-bot .currentb a,.nav-bot a,.nav-bot li,.nav-bot li:hover>a,.nav-bot ul,.nav-bot ul li a:hover{margin:0!important}.nav-bot li{float:left;position:relative;border-bottom:none!important}.nav-bot a{display:block;padding:5px 20px!important;text-shadow:0 1px 2px #000;color:#fff!important}.nav-bot li:hover>a{background:0 0!important;color:#f80!important}.nav-bot .currentb a{background:0 0!important;color:#fff!important}.nav-bot ul{background:#fff!important;padding:0!important;width:170px;position:absolute;top:30px;left:-9999px;border:1px solid #555!important}.nav-bot li:hover>ul,body:after{display:block;left:0}.nav-bot ul li{float:none}.nav-bot ul li a{color:#000!important;font-weight:400;padding:10px!important}.nav-bot ul li a:hover{background:#3c5b99!important;color:#fff!important}

CODE HTML

<ul class="nav-bot"> <li class="current"><a href="URL1">Nama Link-1</a></li> <li><a href="URL2">Nama Link-2</a></li> <li><a href="URL3">Nama Link-3</a></li> <li><a href="URL4">Nama Link-4</a></li> <li><a href="URL5">Nama Link-5</a></li> <li><a href="URL6">Nama Link-6</a></li> <li><a href="URL7">Nama Link-7</a></li> <li><a href="URL8">Nama Link-8</a></li> </ul>

---

Cara Pemasangan Code HTML sebagai berikut:

1. Log-In ke Blog MWB kamu
2. Klik Dasbor
3. Klik Menu Navigasi
4. Geser Cursor ke Bawah, atau Tambah Item Baru
5. Paste kan Code HTML pada Kolom Textarea
6. Klik Tambahkan/Save.
7. Selesai.

Semoga bermanfaat,
Wassallam

Enjoy Cuy.

Tag/Keyword:
CSS Desktop MyWapBlog, Script CSS, Code HTML Dropdown Menu Simple, MyWapBlog.

facebook

twitter

Tweet

google+

linkedin