メガドロップダウンメニューの修正【至急】のお仕事 « エンジニア・デザイナーのクラウドソーシング

× このお仕事の募集は終了しています。

×

メガドロップダウンメニューの修正【至急】

HTML・CSSコーディングの仕事の依頼

仕事の概要

公開日 2016年12月30日
応募期限 2016年12月31日
仕事 ホームページ制作・Webデザイン » HTML・CSSコーディング
支払い方式 固定報酬制 予算 〜 5,000円
納品希望日 2017年01月01日
特記事項 急募!

仕事の詳細

すでに実装中の既存のメガドロップダウンメニューのメニューの使い勝手の改善をお願いいたします。

現在、メインメニューをホバーして表示されたサブメニューへ移動する際、隣のボタンをかすったりカーソルを斜め移動するとサブメニューが消えてしまいます。
これを下記サイトのメガメニューのように、隣のボタンをかすったり斜め移動してもサブメニューが消えないように使い勝手を改善していただきたいです。
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 */

どうぞよろしくお願いいたします!

このお仕事に関連するスキル:
HTML CSS JavaScript JavaScript (jQuery)

会員登録(無料)

他の仕事:ホームページ制作・Webデザインの仕事を探す

β版ご意見箱

× 今後表示しない
メガドロップダウンメニューの修正【至急】のお仕事のページ上部へ戻る