BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能

2022-01-21 16:18:55

ナビゲーションバー実装、トップナビゲーションバー固定、セカンダリーメニュー実装
/{br レンダリングです。

2018/11/16に更新しました。
最近、このナビゲーションバーを使用する際に、ズームインとズームアウトの場合のページが、ナビゲーションバーのレイアウトと表示に、いくつかの小さな問題があることがわかったので、コードのCSS部分を変更し、再投稿しました。

新しいコードの実装（レイアウトの最適化）。 

<html>
   <head>
       <style type="text/css">
        .top{
    /* set width height background color *    height: auto; /* change height to auto height *    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    position: fixed; /*fixed at the top*    top: 0;/* distance from top is 0*    margin-bottom: 5px;
}
.top ul{
    /* clear the default style of ul tag *    width: auto;/* width also changed to auto *    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 5%;
    /* margin-top: 0; *    padding: 0;

}
.top li {
    float:left; /* make the li content float horizontally, i.e. horizontally aligned *    margin-right:2%; /* distance between two li's *    position: relative;
    overflow: hidden;
}

.top li a{
   /* Set the format of the link content display *    display: block; /* displaying the link as a block element makes the entire link area clickable *    color:white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* remove underline *    
}
.top li a:hover{
    /* background becomes black when mouse is selected *    background-color: #111;
}
.top ul li ul{
    /* set secondary menu *    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* hide the content of the secondary menu by default *
}
.top ul li ul li{
    /* Display of secondary menu li content *    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* When the content of the secondary menu is selected by the mouse *    display: block;
}
body{
    background:#eff3f5;
}

       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">first-level menu</a></li>
                    <li><a href="#">Level 1 Menu</a></li>
                    <li><a href="#">Level 1 Menu</a></li>
                    <li><a href="#"><b>Level 1 Menu</b></a></li>
                    <li><a href="#">Level 1 Menu</a></li>
                    <li>
                        <a href="#">Level 1 Menu</a>
                        <ul>
                            <li><a href="#">Secondary Menu</a></li>
                            <li><a href="#">Secondary Menu</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

のオリジナルコード実装（ページ拡大・縮小時のナビゲーションレイアウトに問題がある）。 

<html>
   <head>
       <style type="text/css">
        .top{
            /* set width height background color *            height: 50px;
            width:100%;
            background:rgb(189, 181, 181);
            position: fixed; /* fixed at the top *            top: 0;/* distance from top is 0*        }
        .top ul{
            /* clear the default style of ul tags *            width: 80%;
            list-style-type: none;
            margin: 0;            
            padding: 0;
            overflow: hidden;

        }
        .top li {    
            float:left; /* make the li content float horizontally, i.e. horizontally aligned *            margin-right:50px; /* distance between two li *        }

        .top li a{
           /* set the format of the link content display *            display: block; /* displaying the link as a block element makes the entire link area clickable *            color:white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* remove underline *        }
        .top li a:hover{
            /* background becomes black when mouse is selected *            background-color: #111;
        }
        .top ul li ul{
            /* set secondary menu *            width: auto;
            background:rgb(189, 181, 181);
            position: absolute;
            display: none; /* hide the content of the secondary menu by default *
        }
        .top ul li ul li{
            /* display of secondary menu li content *            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /* When the secondary menu content is selected by mouse *            display: block;
        }
       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">first-level menu</a></li>
                    <li><a href="#">Level 1 Menu</a></li>
                    <li><a href="#">One-Episode Menu</a></li>
                    <li><a href="#"><b>One Episode Menu</b></a></li>
                    <li><a href="#">Level 1 Menu</a></li>
                    <li>
                        <a href="#">Level 1 Menu</a>
                        <ul>
                            <li><a href="#">Secondary Menu</a></li>
                            <li><a href="#">Secondary Menu</a></li>
                        </ul>
                    </li>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します