Menu dengan Tampilan Membesar

Menu dengan Tampilan Membesar

Pada kali ini saya membagikan menu dengan tampilan gambar akan membesar jika tersorot oleh mouse, juga teks judul akan tampak jika mouse mendekatinya. baiklah untuk lebih matabnya dapat kamu lihat sendiri pada tampilan demo berikut ini dan filenya juga dapat diunduh sendiri.

Tag CSS nya

<style type="text/css"> .expand-down { font-family:Arial, Helvetica, sans-serif; line-height:normal; margin-top:20px; height:150px; width:630px; margin-left:370px; background: linear-gradient(skyblue,blue); } .expand-down * { margin: 0; padding: 0; } .expand-down ul { padding-top:10px; margin-left:0px; } .expand-down ul li { float:left; list-style-type:none; } .expand-down ul li a { text-decoration:none; } .expand-down ul li a img { width:100px; height:100px; border:none; } .expand-down ul li a span { display:none; } .expand-down ul li:hover a span { display:block; font-size:14px; text-align:center; color:#fff; } .expand-down ul li:hover a img { width:150px; height:150px; } .expand-down ul li:hover + li a img { width:110px; height:110px; } </style>

Tag HTML nya

<div class="expand-down"> <ul> <li> <a target="_blank" rel="nofollow" title="Opera" href="http://www.opera.com/download/"> <img title="Opera" alt="Opera" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgo8PXKltOu7hDzrHwZJ4BX0BumKHOd1-qZpQwzT62xMOXJZ6ERPhdDO8kaEYiu3suYxMw4eTxoXOeIcZZbrXeKiFFGpg1qlPMLqjC46BBzo6Xq0BZ8amhIFB28l5qqqK6b5PHmTv4-cGR/s320/opera-trans.png" alt="Menu dengan Tampilan Membesar"></img> <span> Opera </span> </a> </li> <li> <a target="_blank" rel="nofollow" title="Safari" href="http://www.apple.com/safari/download/"> <img title="Safari" alt="Safari" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNy9L3yxSMw3zmY59PJNaVLccxQzY-kMidqVEkjUFt-OxU9Rk1hVvR5aPMHobwiRHRVJlgBSfKKUaq1Wv_FG4N8_yGfkx1G26Q2bRc-vqa2Xi99UqnNuP5BVY42SEilKE9uYMavm0C9HTH/s320/safari-trans.png" alt="Menu dengan Tampilan Membesar"></img> <span> Safari </span> </a> </li> <li> <a target="_blank" rel="nofollow" title="Firefox" href="http://www.mozilla.com/en-US/firefox/"> <img title="Firefox" alt="Firefox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigBk98LdI5BsizmwyNjRXHN1cc-dnr43JVrABMQlAuTGueFAP0sRu8XlJ8bhcsvSXiIIi2VOPbLMYMxW1IZhdPGIO1PPuftIAw0U1LO1VYBDphvZUTFtkUfmMvhesUN-No07CxD0L2vHbQ/s320/firefox-trans.png" alt="Menu dengan Tampilan Membesar"></img> <span> Firefox </span> </a> </li> <li> <a target="_blank" rel="nofollow" title="Google Chrome" href="http://www.google.com/chrome"> <img title="Google Chrome" alt="Google Chrome" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0hJM06mXCgHN0NnFM2QuJOqdolvFqjHohh2VcVDsPvfP0wAKdNCR8e6t_smuTmw044e6Sh9HXahfMWqHLtkgh2duEM551vAhDKyAFRMaQ5QdOKcpdQnEYJ3CEIuSedn5a_qbDJKGjjPP/s320/google-chrome-trans.png" alt="Menu dengan Tampilan Membesar"></img> <span> Google Chrome </span> </a> </li> <li> <a target="_blank" rel="nofollow" title="Internet Explorer" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx"> <img title="Internet Explorer" alt="Internet Explorer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0g5ogoK-aaL8cPx616bOWdOTp6ysNq5O34XpNinXVbVVOv1DasVr3pdsuPE1A0YfwQIOKfe-5mf1Oaom48FLokEPRwBQ9fVwnu-ClyPSLi-iTjeiyd3rtIJ8IftXeAdyrLFmMWMb3kgna/s320/ie-trans.png" alt="Menu dengan Tampilan Membesar"></img> <span> Internet Explorer </span> </a> </li> </ul> </div>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh