レスポンシブメニューがデスクトップで動作しません

-1

レスポンシブメニューを作成しようとしていますが、モバイルで動作するようになっていますが、デスクトップのブラウザに開くと、メニューボタンはうねりがあり、フル幅に設定されません。レスポンシブメニューがデスクトップで動作しません

var geolifygeoredirect = document.createElement('script') 
 
geolifygeoredirect.setAttribute('type', 'text/javascript') 
 
geolifygeoredirect.async = 1 
 
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer) 
 
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect); 
 

 
/*Javascript*/ 
 
$(function() { 
 
    var $page = jQuery.url.attr("file"); 
 
    $('ul.navigation li a').each(function() { 
 
    var $href = $(this).attr('href'); 
 
    if (($href == $page) || ($href == '')) { 
 
     $(this).addClass('on'); 
 
    } else { 
 
     $(this).removeClass('on'); 
 
    } 
 
    }); 
 
}); 
 
/*Javascript End*/

body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#logo { 
 
    z-index: 100; 
 
    position: relative; 
 
    float: left; 
 
    padding-left: 3px; 
 
    padding-top: 7px; 
 
} 
 

 
#menutext { 
 
    color: #e30317; 
 
    font-size: 22px; 
 
} 
 

 
#menu { 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    border-color: #eeeeee; 
 
    z-index: -100; 
 
    background: #ffffff; 
 
    /*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/ 
 
    ; 
 
    line-height: 4.1em; 
 
    font-weight: 200; 
 
    width: 100%; 
 
    margin: inherit; 
 
    color: #c6c6c6; 
 
    padding-bottom: 0; 
 
    height: 300px; 
 
} 
 

 
#lines { 
 
    position: relative; 
 
    object-position: center; 
 
    border-color: #e30317; 
 
} 
 

 
ul.navigation { 
 
    background: #fff; 
 
} 
 

 
ul.navigation li a { 
 
    text-decoration: none; 
 
} 
 

 
ul.navigation li a.on { 
 
    background: #eeeeee; 
 
    padding: 2px 6px; 
 
    min-width: 100%; 
 
} 
 

 
.mobile-menu { 
 
    display: block; 
 
    background: #c6c6c6; 
 
    /*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/ 
 
    ; 
 
    line-height: 100px; 
 
    font-weight: 200; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    color: #c6c6c6 
 
} 
 

 

 
/*Strip the ul of padding and list styling*/ 
 

 
.mobile-menu ul { 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
    background: #c6c6c6; 
 
    position: relative; 
 
    height: 50px; 
 
} 
 

 

 
/*Create a horizontal list with spacing*/ 
 

 
.mobile-menu li { 
 
    display: inline-block; 
 
    /*float: left; 
 
\t margin-right: 1px;*/ 
 
} 
 

 

 
/*Style for menu links*/ 
 

 
.mobile-menu li a { 
 
    display: block; 
 
    min-width: 130px; 
 
    text-align: center; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #eee; 
 
    text-transform: uppercase; 
 
    background: #253746; 
 
    text-decoration: none; 
 
    margin-left: -15px; 
 
    padding: 20px 0; 
 
    -webkit-transition: all 0.4s ease 0s; 
 
    -moz-transition: all 0.4s ease 0s; 
 
    -ms-transition: all 0.4s ease 0s; 
 
    -o-transition: all 0.4s ease 0s; 
 
    transition: all 0.4s ease 0s; 
 
    font-size: 1.0em; 
 
    font-weight: bold; 
 
    border-color: #e30317; 
 
    border-left: 1px solid; 
 
    border-top: 1px solid; 
 
    border-right: 3px solid; 
 
    border-bottom: 0px solid; 
 
    height: 70px; 
 
} 
 

 

 
/*Hover state for top level links*/ 
 

 
.mobile-menu li:hover a { 
 
    color: #333; 
 
    background-color: #eee; 
 
} 
 

 

 
/*Style for dropdown links*/ 
 

 
.mobile-menu li:hover ul a { 
 
    background: #c6c6c6; 
 
    color: #FFF; 
 
    height: 40px; 
 
    line-height: 40px; 
 
} 
 

 

 
/*Hover state for dropdown links*/ 
 

 
.mobile-menu li:hover .mobile-menu ul a:hover { 
 
    color: #eee; 
 
} 
 

 

 
/*Hide dropdown links until they are needed*/ 
 

 
.mobile-menu li ul { 
 
    display: none; 
 
    color: #eee 
 
} 
 

 

 
/*Make dropdown links vertical*/ 
 

 
.mobile-menu li ul li { 
 
    display: none; 
 
    float: none; 
 
} 
 

 

 
/*Prevent text wrapping*/ 
 

 
.mobile-menu li ul li a { 
 
    width: auto; 
 
    min-width: 100px; 
 
    padding: 0 10px; 
 
} 
 

 

 
/*Style 'show menu' label button and hide it by default*/ 
 

 
.mobile-menu .show-menu { 
 
    text-decoration: none; 
 
    color: #333; 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 10px 15px; 
 
    display: none; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
.mobile-menu .show-menu span { 
 
    padding-left: 35px; 
 
} 
 

 

 
/*Hide checkbox*/ 
 

 
.mobile-menu input[type=checkbox] { 
 
    display: none; 
 
} 
 

 

 
/*Show menu when invisible checkbox is checked*/ 
 

 
.mobile-menu input[type=checkbox]:checked~#menu { 
 
    display: block; 
 
    color: #333333; 
 
} 
 

 

 
/*Responsive Styles*/ 
 

 
@media screen and (max-width: 916px) { 
 
    .mobile-menu .lines { 
 
    border-bottom: 15px double #f8f8f8; 
 
    border-top: 5px solid #f8f8f8; 
 
    content: ""; 
 
    height: 5px; 
 
    width: 20px; 
 
    padding-right: 15px; 
 
    float: right; 
 
    } 
 
    /*Make dropdown links appear inline*/ 
 
    .mobile-menu ul { 
 
    position: static; 
 
    display: none; 
 
    } 
 
    /*Create vertical spacing*/ 
 
    .mobile-menu li { 
 
    margin-bottom: 1px; 
 
    } 
 
    /*Make all menu links full width*/ 
 
    .mobile-menu ul li, 
 
    .mobile-menu li a { 
 
    width: 100%; 
 
    } 
 
    /*Display 'show menu' link*/ 
 
    .mobile-menu .show-menu { 
 
    display: inherit; 
 
    color: #fff; 
 
    } 
 
} 
 

 

 
/* Test CSS END*/ 
 

 

 
} 
 

 
} 
 
@media screen and (min-width: 481px) { 
 
    /* comes into effect for screens larger than or equal to 481 pixels */ 
 
    #pager { 
 
    width: 481px; 
 
    } 
 
    @media screen and (min-width: 916px) { 
 
    /* comes into effect for screens larger than or equal to 481 pixels */ 
 
    
 
    #page { 
 
     min-width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Face Masks</title> 
 
    <nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png"> 
 

 
    <label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label> 
 
    <input type="checkbox" id="show-menu"> 
 

 
    <ul class="menu" id="menu"> 
 
     <li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png"><a href="http://go.jsp.co.uk/pages/go-head.html">Head Safety</a></li> 
 
     <li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png"><a href="http://go.jsp.co.uk/pages/go-hearing.html">Hearing Safety</a></li> 
 
     <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png"><a href="http://go.jsp.co.uk/pages/go-facemask.html">Face Masks</a></li> 
 
     <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png"><a href="http://go.jsp.co.uk/pages/go-disposable.html">Disp. Masks</a></li> 
 
     <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png"><a href="http://go.jsp.co.uk/pages/go-eyewear.html">Eye Safety</a></li> 
 
     <li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png"><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</head> 
 

 
<body> 
 

 

 
    <div style="padding-top: 113px"> 
 
    <img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null"> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-09-19 Danny

javascriptエラーが発生しました** "message"： "Uncaught ReferenceError：$が定義されていません"、** –

JQueryを使用する場合の最初の手順は、それを含める必要があります。自分のWebサイトからダウンロードし、JQueryコードの前にヘッダーにリンクするか、JQuery CDNから挿入します。 – Czoka

どうぞよろしくお願いいたします。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav –

jQueryのは（私はあなたのスニペットを実行したとき、私はUncaught ReferenceError: $ is not definedを得る）ドキュメントにありません。

あなた<head>セクションに次の行を追加し、jQueryのを追加するには：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

出典

2017-09-19 09:05:54

おかげGuysはそのアライメントを整理し、ただ非常に幅いっぱいに設定されていないデスクトップブラウザで束ね。

出典

2017-09-19 09:31:25 Danny

レスポンシブメニューがデスクトップで動作しません

答えて

関連する問題