Q&A
### 前提
ここに質問の内容を詳しく書いてください。
jqueryにて ハンバーガーメニューを作成しているのですがレスポンシブ対応をしたくて
スマホサイズのブレークポイントを@media screen and (max-width:480px)に設定したのですが
ヘッダー部分から見切れてしまいます。
ヘッダー部分にハンバーガーメニューを載せたいです
実現したいこと
ここに実現したいことを箇条書きで書いてください。
ヘッダー部分にハンバーガーメニューを載せたいです
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ハンバーガーメニュー</title> <link rel="stylesheet" href="reset.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1 class="heading"> SHOGO<span> NAKAMURA</span> </h1></header> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); }); $('a[href^="#"]').click(function () { var speed = 400; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({ scrollTop: position }, speed, 'swing'); return false; }); </script><nav> <ul class="list_nav_header"> <li> <a href="#profile">Profile</a> </li> <li> <a href="#im-skill">Skill</a> </li> <li> <a href="#contact">Contact</a> </li> <li class="Twitter"> <a href="https://twitter.com/8K0zwoxb0m93r1q"> <img src="img/Twitter.png"> </a> </li> </ul> </nav> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="globalMenuSp"> <ul> <li><a href="#profile">Profile</a></li> <li><a href="#im-skill">Skill</a></li> <li><a href="#contact">contact</a></li> </ul> </nav>
@media screen and (min-width:480px){
header{
width: 100%;
height: 100px;
background-color: #000000;
}
header h1{
width: 100%;
font-size: 30px;
color: white;
float: left;
position: relative;
right: 5px;
}
span{
display: block;
}
.list_nav_header {
display: flex;
align-items: center;
gap: 40px;
font-family:Arial Black;
display: none;
}
.Twitter img{
width: 50px;
height: 50px;
border-radius:50%;
}
main {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.burger img{
border-radius: 30px;
}
.burger:hover {
background-color: #ddd;
}
.burger.is-active {
background-image: url(img/close.svg);
}
.menu {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 20vh;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: none;
}
.menu_header{
align-items: center;
gap: 40px;
font-family:Arial Black;
}
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 13px;
top : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
margin-top: 15px;
}
.hamburger span {
display: inline-block;
font-size: 0;
position: fixed;
left: 15px;
background : #FFFFFF;
-webkit-transition: 0.5s ease-in-out;
-moz-transition : 0.5s ease-in-out;
transition : 0.5s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
-webkit-transform: rotate(315deg);
-moz-transform : rotate(315deg);
transform : rotate(315deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
-webkit-transform: rotate(-315deg);
-moz-transform : rotate(-315deg);
transform : rotate(-315deg);
}
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #000;
background: #fff;
text-align: center;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
}
nav.globalMenuSp ul {
background-image: url(img/IMG_4666.JPG);
margin: 0 auto;
padding: 0;
width: 100%;
}
nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}
nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
transform: translateX(0%);
}
}
ソースコード
試したこと
min-width:480pxに変更かけたり
display: inline;に変更
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
.hamburger spanにwidthとheightを持たせるだけで最低限動くようになりました
追加
css
1.hamburger span { 2 height: 4px; 3 width: 30px; 4}
投稿2022/08/05 23:17
総合スコア14
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。