html - 写真のようなメニューを作るには？CSS スタイル

Question

写真のようなメニューを作るには？

今のところ私は持っています：

<div id="nav">
   <nav class="top-nav">
      <div class="shell">
         <a href="#" class="nav-btn">HOMEPAGE<span></span></a>
         <span class="top-nav-shadow"></span>
         <ul>
            <li class="active"><span><a href="#">home</a></span></li>
            <li><span><a href="#">services</a></span></li>
            <li><span><a href="#">projects</a></span></li>
            <li><span><a href="#">solutions</a></span></li>
            <li><span><a href="#">jobs</a></span></li>
            <li><span><a href="#">blog</a></span></li>
            <li><span><a href="#">contacts</a></span></li>
         </ul>
      </div>
   </nav>
</div>

そして、div nav の私の css:

     #nav{
         background-color: transparent;
         padding: 0em 0em 0em 2em;
         white-space: nowrap;
         list-style: none outside none;
         margin: 0px;
         height: auto;
         line-height: normal;
     }

これをどのようにスタイリングしますか？私は初心者です

Answer 1

あなたの写真から、あなたはメニューではなく作る方法を探していると思いTabsます..

あなたが使用できる最良のものはjQuery Tabsだと思います

そのリンクから、単純な html と jQueryUI css を使用して作成する方法を確認できます。

css と html のみを使用する場合は、これをチェックしてください

CSSとHTMLでシンプルなタブメニューを作る方法

Answer 2

そのためにはいくつかの js が必要です。

これは、フレームワークを必要とせず、ニーズに合う例です (jQuery を使用):

$('#tab-nav > li').click(function(e) {
    // get new active pane id
    var idPane = $(this).find('a:first').attr('href').substring(1);
    // change active nav
    $('#tab-nav > li').removeClass('active');
    $(this).addClass('active');
    // change active pane
    $('.tab-pane').removeClass('active');
    $('#'+idPane).addClass('active');
});

.clear { display: block; clear: both; height: 0px; }

#container {
    position: relative;
    color: #497188;
}
#tab-nav {
    position: relative;
    z-index: 20;
}
#tab-nav > li { 
    display: block;
    border: 1px solid #497188;
    border-bottom: 1px solid #497188;
    padding: 1px 3px;
    margin: 0 2px -1px;
    float: left;
}
#tab-nav > li a {
    color: #497188;
    text-decoration: none;
}
#tab-nav > li.active,
#tab-content {
    background: #DEE7EC;
    border-bottom: 1px solid #DEE7EC;
}
#tab-content {
    position: relative;
    clear: both;
    border: 1px solid #497188;
    z-index: 10;
}
.tab-pane {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px;
}
.tab-pane.active {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
    <ul id="tab-nav">
        <li class="active"><span><a href="#home">home</a></span></li>
        <li><span><a href="#services">services</a></span></li>
        <li><span><a href="#projects">projects</a></span></li>
        <li><span><a href="#solutions">solutions</a></span></li>
        <li><span><a href="#jobs">jobs</a></span></li>
        <li><span><a href="#blog">blog</a></span></li>
        <li><span><a href="#contacts">contacts</a></span></li>
    </ul>
    <div id="tab-content">
        <div id="home" class="tab-pane active">home</div>
        <div id="services" class="tab-pane">services</div>
        <div id="projects" class="tab-pane">projects</div>
        <div id="solutions" class="tab-pane">solutions</div>
        <div id="jobs" class="tab-pane">jobs</div>
        <div id="blog" class="tab-pane">blog</div>
        <div id="contacts" class="tab-pane">contacts</div>
        <p class="clear">&nbsp;</p>
    </div>
</div>

Answer 3

例を作成しました。ぜひご覧ください。

働くフィドル

• これの主なコンセプトは、liタグを に配置することulです。
• タグbottom: -1pxがliの境界線に来るようにしますul。
• border-bottomをli指定すると、border のように見えますul。

これを参考に（ただしコードをコピペしないで）独自のスタイリングを作っていただければ幸いです。

Answer 4

これは、必要なスタイルを示す jsFiddleです。

• タグはLI左にフロートされ、フロートを含むoverflow: hidden;ように親ULタグに設定されます。

• ULタグ全体position: relative; margin-bottom: -1px;が、その下の要素の上に移動します。タグの下の 1 ピクセルの境界線はA、タブが下の要素の一部であるという錯覚を与えます。アクティブなタブのborder-bottom-colorは、コンテンツ領域の背景色と一致するように設定されています。

• Aタグは、 、および垂直をdisplay: block;指定できるように設定されていますmin-widthtext-align: center;padding

• 私はまた、才能border-radiusのAタグに小さなものを付けました:-p これは、必要ない場合は削除できます。

.activeサーバー上で実行されているコードによってクラスが変更されると想定しています。そうでない場合、上記の回答のいくつかにリストされているJSは、タブがクリックされたときにクラスを変更します。一部の回答はタブのクラスのみを変更します (これは実際には必要なものではありません…)。代わりにライブラリを参照してください (ただし、ほとんどの JS タブ ライブラリは特定の HTML 構造を必要とするため、それに応じて CSS を変更する必要があります)。 ）。詳細が必要な場合は、下にコメントを残してください。