おかげさま – 感謝の種まき –

人生で学んだスキルや知識のアウトプットブログです。旅する自由人を目指すブロガー Hiro先生です。

  • ホーム
  • ひとこと

    Hiroのひとこと♪

    『Hiroの知恵袋🌱』
    有料コミュニティーを オープンしました!
    yoor にて初月無料・翌月から月100円にて
    老若男女無制限ご参加いただけます。

    人間関係、健康、ビジネス、勉強、自己成長 などなど
    人生を豊かにしたい人はご参加ください。
    HiroのBrainを共有します♪

    今すぐ仲間になる

    【CSS】フローティングウィンドウ・フローティングメニューを実装する方法

    2020年7月7日CSS

    • Tweet
    • このエントリーをはてなブックマークに追加

    フローティングウィンドウ・フローティングメニューを
    実装する方法を解説していきます。

    今回はふたつ
    左側にバナーやメニューや
    メッセージなど自由に設定出来ます。

    一つは単純にフローティングウィンドウを表示
    2つ目は、閉じるボタンを実装しているフローティングウィンドウ

    左エリアにフローティングウィンドウを表示

    CSS

    #test {
      float: left;
      width: 150px;
      position: fixed;
    	top: 200px;
    	left:10px;
    	margin: 10px;
    	border: 2px solid #CCFFCC;
    	background-color: #fff;
    	padding: 5px;
    	z-index:99999;
    }

    HTML

    <div id="test">
    	MENU001
    </div>

    フローティングウィンドウを表示・閉じるボタンを実装

    CSS

    .btn {
        color: #000;
        background: rgba(204, 255, 204, .5);
        padding: .3em .5em;
        border-radius: .3em;
        text-align: center;
        display: table;
        cursor: pinter; 
    }
    .btn:hover {
        cursor: pinter; 
    	  background: rgba(204, 230, 204, .5);
    }
    .btn:active {
        background: rgb(127, 194, 239);
    }
    .box {
      border: 2px solid #CCFFCC;
      border-radius: .3em;
      width: 150px;
      position: fixed;
    	top: 200px;
    	left:10px;
    	margin: 10px;
    	padding: 15px;
    	z-index:9999;
    	background-color: #fff;
    }
    
    /* close button */
    .action-close {
        position: relative;
        margin-top: 2em;
    }
    .action-close .btn {
      position: fixed;
      left: 160px;
      top: 195px;
    	z-index:99999;
    }
    .action-close .box {
        margin-bottom: 2em;
        border: 2px solid rgb(204, 255, 204);
    }
    
    /* checkbox non-display */
    .add-control .checkbox {
        display: none;
    }
    
    /* close button's control */
    .add-control .action-close #close:checked ~ .btn {
        display: none;
    }
    .add-control .action-close #close:checked ~ .box {
        display: none;
    }

    HTML

    <div class="add-control">
    <div class="action-close">
      <input id="close" class="checkbox" name="close" type="checkbox"><label class="btn" for="close">閉じる</label>
      <div class="box">閉じることができるコンテンツ</div>
    </div></div>

    是非、お試しください。

     

    <スポンサーリンク>




  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2019-2022 おかげさま – 感謝の種まき – All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

  • 
    ホーム
  • 
    メニュー
  • 
    SNS
  • 
    サイドバー
  • 
    検索
  • 
    上へ
 TOP