KrishnaVandanu

Menjaga Keadaan Hover pada Menu Induk

<div dir="ltr" style="text-align: left;" trbidi="on"> Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu: <figure class="separator center"><a href="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" title="Menu Navigasi Sebelum Diperbaiki"><img alt="Menu Navigasi Sebelum Diperbaiki" src="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" /></a><figcaption>Efek hover pada menu induk menghilang saat pointer memasuki submenu</figcaption></figure> <div class="button-group"> Sebelum</div>  <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/ETBLz/32/embedded/" width="100%"></iframe> Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini: <pre id="code-block:1" rel="CSS"><code class="css">nav li a:hover { background-color:blue; }</code></pre> Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code>, bukan di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>: <figure class="separator center"><a href="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" title="Submenus"><img alt="List Item" src="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" /></a><figcaption>Susunan Submenu</figcaption></figure> Sayangnya menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>, sehingga saat pointer keluar dari <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya: <pre id="code-block:2" rel="CSS"><code class="css">nav li a:hover, nav li:hover > a { background-color:blue; }</code></pre> Dengan cara di atas maka warna pada menu induk akan tetap terjaga meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar, tapi pada dasarnya pointer masih berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> induk: <figure class="separator center"><a href="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" title="Menu Navigasi Sesudah Diperbaiki"><img alt="Menu Navigasi Sesudah Diperbaiki" src="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" /></a><figcaption>Warna hover pada menu induk tetap terjaga</figcaption></figure> <div class="button-group"> Sesudah</div> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/tovic/ETBLz/1/embedded/" width="100%"></iframe> ajb@2013</div>

Menjaga Keadaan Hover pada Menu Induk

Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilan...

Installing X-Ray Goggles

<div dir="ltr" style="text-align: left;" trbidi="on"> <section> <header><h2> Installing X-Ray Goggles</h2> </header> <div class="content"> <noscript> <div class="alert"> In order to use the goggles, you need to have JavaScript enabled. Please enable it or use a browser that supports it. </div> </noscript> <div class="alert msie-only" style="display: none;"> Sorry, but the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Goggles" rel="wikipedia" title="Goggles">goggles</a> don't yet work on <a class="zem_slink" href="http://www.microsoft.com/windows/internet-explorer/" rel="homepage" title="Internet Explorer">Microsoft Internet Explorer</a>. Until they do, please use the latest version of <a href="http://mozilla.org/firefox">Firefox</a>, <a class="zem_slink" href="http://www.opera.com/" rel="homepage" title="Opera">Opera</a>, <a class="zem_slink" href="http://www.google.com/chrome" rel="homepage" title="Google Chrome">Chrome</a>, or <a class="zem_slink" href="http://https//www.apple.com/safari" rel="homepage" title="Safari (web browser)">Safari</a>.</div> The X-Ray Goggles are a bookmarklet—a special kind of tool that can augment any <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_page" rel="wikipedia" title="Web page">web page</a>. Here's how to install the goggles bookmarklet so you can inspect and remix anything you see on the web. <ol class="steps"> <li> Enable your browser's <a class="zem_slink" href="http://en.wikipedia.org/wiki/Bookmark_%28World_Wide_Web%29" rel="wikipedia" title="Bookmark (World Wide Web)">bookmarks</a> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Toolbar" rel="wikipedia" title="Toolbar">toolbar</a> by watching this video: <video controls="" src="http://videos-cdn.mozilla.net/serv/labs/hackasaurus/Toolbar-Win7-FF7.webm" style="width: 100%;" tabindex="0"></video> </li> <li> Drag the <a class="button no-arrow" href="javascript:(function(){var%20script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();">X-Ray Goggles</a> up to your bookmarks toolbar. </li> <li> Whenever you want to remix any web page you're visiting, just click on the X-Ray Goggles button in your bookmarks toolbar. </li> </ol> That's all there is to it. Happy webmaking!</div> </section> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: none; float: right;" /></div> </div>

Installing X-Ray Goggles

Installing X-Ray Goggles In order to use the goggles, you need to have JavaScript enabled. Please enable...