投稿日：2020-09-27T19:47:19+09:00

【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。

どうも7noteです。本日作る料理はハンバーガーです。

完成予定図

では、まずは一般的なハンバーガーメニューの作り方から。

一般的なハンバーガーメニューの作り方

index.html

<div class="menu">
  <input type="checkbox" id="check" class="hidden" >
  <label for="check" class="open"><span></span></label>
</div>

style.css

.hidden {
  display: none;
}

.open {
  width: 25px;
  height: 25px;
  display: block;
  position: relative;
  cursor: pointer;
}

.open span,
.open span:before,
.open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

.open span:before {
  bottom: 8px;
}

.open span:after {
  top: 8px;
}

#check:checked ~ .open span {
  background: rgba(255, 255, 255, 0);
}

#check:checked ~ .open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#check:checked ~ .open span::after {
  top: 0;
  transform: rotate(-45deg);
}

今回のメインはハンバーガー作りなので解説は省略します。

本物のハンバーガーメニュー

index.html

<div class="drawer">
  <input type="checkbox" id="check" class="hidden" >
  <label for="check" class="open">
    <span class="ue"></span>
    <span class="retas"></span>
    <span class="tomato"></span>
    <span class="meat"></span>
    <span class="retas"></span>
    <span class="shita"></span>
  </label>
</div>

style.css

.hidden {
  display: none;
}

.open {
  width: 25px;
  display: block;
  margin: 20px;
  position: relative;
  cursor: pointer;
}

.open span {
  content: '';
  display: block;
  width: 25px;
  background: #333;
  transition: 0.5s;

}

.open .ue {
    background: #E4AE54;
    border-radius: 10px 10px 0 0;
    height: 5px;
}
.open .retas {
    background: #98E357;
    height: 2px;
}
.open .tomato {
    background: #E34F50;
    height: 2px;
}
.open .meat {
    background: #975637;
    height: 2px;
}
.open .shita {
    background: #E4AE54;
    border-radius: 0 0 2px 2px;
    height: 3px;
}

#check:checked ~ .open span:not(.meat):not(.tomato) {
  background: rgba(255, 255, 255, 0);
}

#check:checked ~ .open .tomato {
  position: absolute;
  bottom: 5px;
  transform: rotate(45deg);
  background: #333;
}

#check:checked ~ .open .meat {
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  background: #333;
}

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

参考・アイデア元

・CSSだけで作るハンバーガメニュー
https://yuntu-tek.com/hamburger-menu/
・ロッテリア
https://www.lotteria.jp/sp/menu/category.php?c=burger

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-27T18:19:25+09:00

ググりまくって試行錯誤したがやはりvertical-alignが効かない

前提読者

タイトルの通り

ひとつの可能性

vertical-alignを設定しているセレクタの
line-heightとfont-sizeをheightより小さくする。
複数行文字を表示している人には関係ない話
終わり

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-27T17:48:42+09:00

オンラインイナズマ追加ワーク6日目模範解答

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>TECH::MASTER</title>
    <link rel="stylesheet" href="reset.css" >
    <link rel="stylesheet" href="style.css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
  </head>

  <body>
    <header class="header">
      <div class="container">
        <div class="header_left">
          <a class="header_logo" href="#">
            <img  class="logo_img" alt="TECH::MASTER" src="./images/logo.svg"  />
          </a>
        </div>

        <div class="header_right">
          <ul class="header_right_ul">
            <li class="header_right_li">
              お困りの方はこちら
            </li>
            <li class="header_right_li">
              カリキュラム変更
            </li>
            <li class="header_right_li">

                <img class="profile_img" alt="プロフィール画像"  src="./images/profile.jpg">

            </li>
          </ul>
        </div>

      </div>
    </header>
  </body>
</html>

style.css

body{
    font-family: "Helvetica Neue", Helvetica, Arial , "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "HIragino Kaku Gothic Pro W3", "HIragino Kaku Gothic Pro", Meryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  font-weight: 300;
  letter-spacing: 0.1rem;
}

.header{
    margin: 40px 0;
}

.container{
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.logo_img{
    height: 30px;
}


.header_right_ul{
    display: flex;
}

.header_right_li{
    font-size: 12px;
    margin: 0 15px;
    color: #333;
    line-height: 40px;
}



.profile_img{
    height: 36px;
    border-radius: 50%;
    border: 2px solid #eee;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-27T13:06:22+09:00

ドロップダウンリストの実装方法

ドロップダウンリストの実装をJQueryで簡単に行うことができるのですが、
今回は泥臭い方法で、実装していきます。(全て0から実装しました笑)
ほぼCssメインといっても、過言ではないのですが、
JQueyとCssで実装する２パターンを紹介させて頂きます。

index.html

<script>
//ここからは、JQuery！
 $(function(){
//nav ul liをマウスでホバーさせるとnav ul ul が出現する。
   $("nav ul li").mouseenter(function(){
//nav ul li(this)の兄弟要素にnav ul ulを含んでいるのかを調査する。
   $(this).siblings().find("nav ul ul");
//nav ul liの子要素であるnav ul ulをdisplay:blockで目に見えるようにする。
   $(this).children().slideDown(150);
   });
//body内をクリックしたら、nav ul ulをdisplay:noneにして表示させないようにする。
   $("body").click(function() {
      $('nav ul ul').slideUp(150);
   });
});
</script>

<div id="nav">
 <ul>
      <li class ="first"><a href="./index.html">トップページ<br>HOME</a></li>

      <li class="clinic"><a href="#clinic">医院紹介<br>CLINIC</a>

       <ul>
        <li><a href="#">新宿</a></li>
        <li><a href="#">渋谷</a></li>
        <li ><a href="#">赤羽</a></li>
       </ul>
      </li>

      <li><a href="#service">診察案内<br>SERVICE</a></li>
      <li><a href="#staff">院長／スタッフ紹介<br>STAFF</a>

        <ul>
         <li><a href="#">院長紹介</a></li>

         <li class = "parent"><a href="#">スタッフ紹介</a>
           <ul class ="children">
            <li><a href="#">赤羽茜</a></li>
            <li><a href="#">宇田川茂良</a></li>
            <li><a href="#">渋谷真知子</a></li>
           </ul>
         </li>

         <li class = "parent"><a href="#">中途採用</a>
             <ul class ="children">
              <li><a href="#">正社員</a></li>
              <li><a href="#">受付アルバイト</a></li>
              <li><a href="#">契約社員</a></li>
             </ul>
           </li>

        </ul>
      </li>
      <li class ="last"><a href="#access">アクセス/Q&A<br>Access</a>

        <ul>
         <li><a href="#">アクセス</a></li>
         <li><a href="#">営業時間</a></li>
        </ul>
      </li>
 </ul>
</div>

style.css

nav ul{
display:flex;
width:1050px;
margin: 0 auto;
}

nav ul ul{
position: absolute;
width:100%;
top: 100%;
left:0;
display: none;
}

nav ul ul li{
width: 100%;
background-color: navy;
border-bottom:1px solid #fff;
right: 0px;
width: 190px;
z-index: 999;
position: relative;
}

nav ul>li{
justify-content: center;
background-color: #6CC6C4;
width:20%;
padding:10px;
text-align:center;
border-right:1px solid white;
position: relative;
}

nav ul li a{
font-size:0.85em;
}

nav ul li a{
color:white;
text-decoration:none;
}

nav ul > ul > li{
background-color: #6CC6C4;
width:200px;
display: block;
padding:10px;
text-align:center;
border-right:1px solid white;
}

li.parent{
position: relative;
}

ul.children{
left:100.8%;
top:0;
position:absolute;
display: none;
}

/*li.parentをhoverすると、子要素のul.childrenが、出現する！*/
li.parent:hover ul.children{
display: block;
opacity: 0.87;
}

完成イメージ図
https://www.nxworld.net/wp-content/uploads/2016/06/css-simple-hoverable-dropdown.png

色や幅に関しては、お好みで調整してみてくださいね！では、アディオス！

　 Tweet
Qiitaで続きを読む

20200927のCSSに関する記事は4件です。

【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。

どうも7noteです。本日作る料理はハンバーガーです。

一般的なハンバーガーメニューの作り方

本物のハンバーガーメニュー

おそまつ！

参考・アイデア元

ググりまくって試行錯誤したがやはりvertical-alignが効かない

前提読者

ひとつの可能性

オンラインイナズマ追加ワーク6日目模範解答

ドロップダウンリストの実装方法

ドロップダウンリストの実装方法

日付別

タグ一覧

20200927のCSSに関する記事は4件です。

【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。

どうも7noteです。本日作る料理はハンバーガーです。

一般的なハンバーガーメニューの作り方

本物のハンバーガー メニュー

おそまつ！

参考・アイデア元

ググりまくって試行錯誤したがやはりvertical-alignが効かない

前提読者

ひとつの可能性

オンラインイナズマ 追加ワーク6日目 模範解答

ドロップダウンリストの実装方法

ドロップダウンリストの実装方法

日付別

タグ一覧

本物のハンバーガーメニュー

オンラインイナズマ追加ワーク6日目模範解答