1. ホーム
  2. 質問と答え
  3. 左のナビゲーションバーをアイコンで作成する方法

左のナビゲーションバーをアイコンで作成する方法

2016-12-26 10 views
0

私は自分の悪いCSSスキルを習っています。左のナビゲーションバーを作成する方法はわかりません（下の画像を参照）。左のナビゲーションバーをアイコンで作成する方法

注：私はすでにトップナビゲーションバーを持っています...そして、どちらの中間にもページの内容が存在します。

enter image description here

<aside> 
    <div class="navbar navbar-fixed-left"> 
     <ul class="nav navbar-nav"> 
      <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
      <li style="border-top: 1px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
      <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
     </ul> 
    </div> 
</aside>

そして、私のCSS：

     .navbar-fixed-left { 
         width: 180px; 
         position: fixed; 
         border-radius: 0; 
         height: 100%; 
         background-color: #F0F0F0; 
         border-right: 1px solid #bdc3c7; 
        } 

        .navbar-fixed-left .navbar-nav > li { 
         float: none; 
         width: 178px; 
        } 

        .navbar-fixed-left + .container { 
         padding-left: 160px; 
        } 

        .navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
         margin-top: -50px; 
         margin-left: 140px; 
        } 


        aside { 
         margin-top: 55px; 
        }

出典

2016-12-26 Cesar

答えて

2

あなたはCSSフレキシボックスを試すことができます。 ul li a要素をフレックスコンテナ&（私の場合は.text）の中にラッパーで囲みます。そして、次のプロパティを適用します。このことができます

body { 
 
    margin: 0; 
 
} 
 

 
.navbar-fixed-left { 
 
    width: 180px; 
 
    position: fixed; 
 
    border-radius: 0; 
 
    height: 100%; 
 
    background-color: #F0F0F0; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 

 
.navbar-fixed-left + .container { 
 
    padding-left: 160px; 
 
} 
 

 
.navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
 
    margin-top: -50px; 
 
    margin-left: 140px; 
 
} 
 

 

 
aside { 
 
    margin-top: 55px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul li a { 
 
    display: flex; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background: #E0E1E6; 
 
} 
 

 
ul li a i { 
 
    padding: 10px; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 

 
ul li a .text { 
 
    padding: 10px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<aside> 
 
    <div class="navbar navbar-fixed-left"> 
 
     <ul class="nav navbar-nav"> 
 
      <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
      <li style="border-top: 1px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
      <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</aside>

希望：

ul li a { 
    display: flex; 
    text-decoration: none; 
}

は以下のスニペットを見てください！

出典

2016-12-26 15:55:59

+0

あなたのコードは私のために動作しませんでした...イメージを確認します。http://4.1m.yt/HxtJl- 6.jpg – Cesar

+0

@Cesarこれはどのように可能ですか？あなたはそれのためのフィドルを共有できますか？ –

0

にここでは、[編集]をクリックし、関連するCSSファイルを取得するには

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Menu</title> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" /> 
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> 
    </head> 
    <body class="no-skin"> 
      <div id="sidebar" class="sidebar responsive ace-save-state"> 
       <ul class="nav nav-list"> 
        <li class=""> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-list"></i> 
          <span class="menu-text"> Applications </span> 
          <b class="arrow fa fa-angle-down"></b> 
         </a> 
         <b class="arrow"></b> 
        </li> 
        <li class=""> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-list"></i> 
          <span class="menu-text"> Applications </span> 
          <b class="arrow fa fa-angle-down"></b> 
         </a> 
         <b class="arrow"></b> 
        </li> 
       </ul><!-- /.nav-list --> 
      </div> 
    </body> 
</html>

、この次のコードを試してみてください。私は、問題は、スニペット出力のビューポートだと思うが小さくなると、いくつかのスタイルを食べる、あなたが持っていますあなたが提供したコードの応答性を維持したい場合は、@mediaクエリを使って値を微調整してください：

Full resizable JSFiddle here（いくつかのCSSは以下のスニペットと変更されました。より大きなvi ewport）

ビッグビューポート： enter image description here

小規模ビューポート： enter image description here

<span>上でテキストをラップすることにより、テキストメニューからアイコンを分離します。 liのrelativeとアイコンabsoluteを作成し、必要に応じて値を調整します

.navbar-fixed-left { 
 
    width: 180px; 
 
    position: fixed; 
 
    border-radius: 0; 
 
    height: 100%; 
 
    background-color: #F0F0F0; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 
ul.nav.navbar-nav { 
 
    margin-top: 0; 
 
} 
 
.navbar-fixed-left .navbar-nav li { 
 
    float: none; 
 
    width: 194px; 
 
    border-top: 1px solid #bdc3c7; 
 
    position: relative; 
 
    border-right: 1px solid lightgray; 
 
} 
 
li:nth-child(3) { 
 
    border-bottom: 1px solid #bdc3c7; 
 
} 
 
.navbar-fixed-left .navbar-nav li a:hover { 
 
    background-color: gainsboro; 
 
} 
 
.navbar-fixed-left + .container { 
 
    padding-left: 160px; 
 
} 
 
.navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
 
    margin-top: -50px; 
 
    margin-left: 140px; 
 
} 
 
span { 
 
    margin-left: 60px; 
 
    color: gray; 
 
} 
 
aside { 
 
    margin-top: 55px; 
 
} 
 
i.fa { 
 
    border-right: 1px solid #bdc3c7; 
 
    padding: 10px 15px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    line-height: 20px; 
 
} 
 
.color1 { 
 
    border-left: 3px solid red; 
 
    margin-left: -1px; 
 
} 
 
.color2 { 
 
    border-left: 3px solid blue; 
 
    margin-left: -1px; 
 
} 
 
.color3 { 
 
    border-left: 3px solid green; 
 
    margin-left: -1px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<aside> 
 
    <div class="navbar navbar-fixed-left"> 
 
    <ul class="nav navbar-nav"> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color1" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color2" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color3" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</aside>

出典

2016-12-26 16:38:46 Syden

+0

あなたのコードは私にとってはうまくいかなかった。画像を確認してください：http://1.1m.yt/c2VIubF.jpg – Cesar

+0

セザール、ちょっと編集して、願っています。 – Syden

関連する問題

 関連する問題