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 menghilang setelah pointer memasuki submenu:Efek hover pada menu indu…

24 Oct 2013

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 it or use a browser that supports it. Sorry, but the g…

14 Mar 2013