×
固定報酬制
|
〜 5,000円
|
---|---|
納品完了日
|
2017年01月01日 |
掲載日
|
2016年12月30日 |
応募期限
|
2016年12月31日 |
応募した人 | 0 人 |
---|---|
契約した人 | 0 人 |
募集人数 | |
気になる!リスト | 1 人 |
すでに実装中の既存のメガドロップダウンメニューのメニューの使い勝手の改善をお願いいたします。 現在、メインメニューをホバーして表示されたサブメニューへ移動する際、隣のボタンをかすったりカーソルを斜め移動するとサブメニューが消えてしまいます。 これを下記サイトのメガメニューのように、隣のボタンをかすったり斜め移動してもサブメニューが消えないように使い勝手を改善していただきたいです。 http://www.morisawa.co.jp/ 予算は3000円です。 ソースは下記のものを改善してください。HTMLの変更はなしで、jqueryとCSSのみの変更で完成形のソースをいただければと思います。 【HTML】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(function(){ $(".sub_wrap").hide(); $("ul#gnavi>li.sub").hover(function(){ $(this).addClass('current'); $(".sub_wrap:not(:animated)", this).fadeIn(500); $('#content').prepend('<div class=""></div>').fadeIn(); },function(){ $(".sub_wrap,.sub_overlay",this).fadeOut();$(this).removeClass('current'); $('.overlay').remove(); }); }); </script> <ul id="gnavi"> <li><a href="#">リンク1</a> <div class=""> <div class=""> <ul class=""> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> <li><a href="#">サブメニュー4</a></li> </ul> </div> </div> </li> <li><a href="#">リンク2</a> <div class=""> ・・・・・ </ul> 【CSS】 #header #gnavi { float:right; margin-top:50px; transition: 0.3s; } #header #gnavi li{ margin:0; float:left; } #header #gnavi li:nth-child(6){ margin-left:20px; } #header #gnavi a{ position: relative; display: inline-block; transition: .3s; height:50px; line-height:50px; color:#333; padding:0 20px; } #header #gnavi li:last-child a{ padding:0; } #header #gnavi a::after { position: absolute; bottom: .0; left: 50%; content: ''; width: 0; height: 3px; background-color: #1F67B9; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #header #gnavi a:hover::after { width: 100%; } #header .sub_wrap{ position:absolute; top:100px; left:0; width:100%; background:#fff; display:none; z-index:200; border-top:1px solid #efefef; } #header .sub_wrap .innr{ width:100%; display:block; padding:25px 0; margin:auto; position:relative; } #header #gnavi .sub_wrap li{ width:18.4%; margin-right:2%; } #header #gnavi .sub_wrap li:last-child{ margin:0; } #header #gnavi .sub_wrap a{ transition: none; line-height:1; height:auto; padding-bottom:0; text-align:center; } #header #gnavi .sub_wrap a:hover{ transition: none; } #header #gnavi .sub_wrap a::after { display:none; } .overlay { position: fixed; top: 100px; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; z-index: 110; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */ どうぞよろしくお願いいたします! |
特記事項 |
---|
|