質問したいこと
http://pilgrim-guild.com/flexbox_humburger-menu/
このサイトを参考にハンバーガーメニューを作ったのですが、メニューからリンク先にとぶとリンク先が開かれたときにメニューが開きっぱなしになってしまうのを改善したいです。
jQueryを使いはじめたばかりなので詳しく教えていただけるとうれしいです。
よろしくお願いします。
ソースコード
<header id="header" role="heading">
<nav>
<div class="logo">
<a href=""><img src="logo.png"></a>
</div>
<ul>
<li><a href="">MENU</a></li>
<li><a href="">PHOTO</a></li>
<li><a href="">INFO</a></li>
</ul>
<div class="nav__icon">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<!--/Nav-->
</header>
jQuery(function(){
jQuery(".nav__icon").on("click", function() {
jQuery(this).toggleClass("active");
jQuery("nav ul").slideToggle();
});
jQuery(window).resize(function(){
var w = $(window).width();
var h = $(window).height();
var x = 768;
if (w >= x) {
jQuery('nav ul').css({ display: 'flex',height: 'auto' });
}else {
jQuery('nav ul').css({ display: 'none',height: h + 'px'});
}
});
});
@media screen and (min-width:768px){
header {
background: #FFF;
width: 100%;
margin:0 auto;
}
.logo img{
width:170px;
}
.logo img:hover{
opacity:0.5;
}
header ul a {
background: transparent;
margin: 0;
padding: 0;
font-size: 120%;
vertical-align: baseline;
text-decoration: none;
font-family: 'Cantata One', serif;
}
nav {
max-width: 970px;
width:80%;
height: 75px;
margin: 0px auto;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
align-items: center;
position:relative;
}
header ul {
display: -webkit-flex;
display: flex;
list-style: none;
height:auto;
position:absolute;
right:0px;
}
header ul li a {
margin: 0px 10px;
padding: 10px;
border-radius: 5px;
color:#182d0e;
}
header ul li :hover{
opacity:0.5;
}
.nav__icon,
.nav__icon span {
display: none;
}
.nav__icon {
width: 36px;
height: 28px;
margin-right: 10px;
position: relative;
cursor: pointer;
}
.nav__icon span {
background: black;
position: absolute;
left: 0;
width: 100%;
height: 4px;
border-radius: 4px;
}
.nav__icon span:nth-of-type(1) {
top: 0;
}
.nav__icon span:nth-of-type(2) {
top: 12px;
}
.nav__icon span:nth-of-type(3) {
bottom: 0;
}
.nav__icon.active span:nth-of-type(1) {
-webkit-transform: translateY(12px) rotate(-45deg);
transform: translateY(12px) rotate(-45deg);
}
.nav__icon.active span:nth-of-type(2) {
display: none;
}
.nav__icon.active span:nth-of-type(3) {
-webkit-transform: translateY(-12px) rotate(45deg);
transform: translateY(-12px) rotate(45deg);
}
}
@media screen and (max-width:767px){
header {
position: relative;
z-index: 999;
}
header h1 {
margin: 0 auto;
}
header ul {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
background: white;
position: absolute;
top: 80px;
left: 0px;
width: 100%;
z-index: 980;
}
header ul li {
padding: 10px;
text-align: center;
}
header ul li a {
display: block;
background: transparent;
margin: 0px;
padding: 20px;
}
header ul li a:hover {
color: #000;
background: #fff;
}
.nav__icon,
.nav__icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
z-index: 999;
position:absolute;
right:0;
}
}
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
現在は「resize」時のみがトリガーとなって切り替えが行われているので、
「load」時も同じように切り替えるようにすると良いです。
onを使って複数イベントを登録してみてください。
jQuery(window).on("resize load",function(){
または、
window.onresize = flexchange;
window.onload = flexchange;
function flexchange(){
var w = $(window).width();
var h = $(window).height();
var x = 768;
if (w >= x) {
jQuery('nav ul').css({ display: 'flex',height: 'auto' });
}else {
jQuery('nav ul').css({ display: 'none',height: h + 'px'});
}
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.96%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2017/10/03 10:39
ソースコードをご提示ください。https://teratail.com/help/question-tips#questionTips3-5
m.ts10806
2017/10/03 10:47
flexboxで作るような記事ですが、現在組まれているcssも提示いただけますか?
m.ts10806
2017/10/03 10:54
何度も修正依頼をしてすみませんが、css部分がコードブロックで囲えていないようなので修正お願いします。投稿編集画面にはリアルタイムで文章のプレビュー確認ができるので、うまくいっているかどうか確認しながら調整してください。
CHOUROU
2017/10/03 10:55
度々申し訳ございません、修正できました。
2017/10/03 11:08
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。