Q

如何使用圖標創建左側導航欄

2016-12-26 109 views 0 likes

0

我正在訓練我的糟糕的css技能，我無法弄清楚如何創建左側導航欄（請參閱下圖）。如何使用圖標創建左側導航欄

注：我已經有一個頂級的導航欄...並在這兩個中間將存在頁面的內容。

<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

A

回答

2

您可以嘗試CSS Flexbox的。使您的ul li a元素爲柔性容器&將文本包裝在包裝中（在我的案例中爲.text）。並應用以下屬性：

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

看一看下面的代碼片段：

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>

希望這有助於！

2016-12-26 15:55:59

+0

您的代碼並沒有爲我工作...檢查圖像：http://4.1m.yt/HxtJl- 6.jpg – Cesar

+0

@Cesar這怎麼可能？你能分享一個小提琴嗎？ –

0

試試這個下面的代碼，

<!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>

要獲得相關的CSS文件，點擊這裏https://github.com/suthagar23/AdmissionSystem/tree/master/public

2016-12-26 15:58:40

0

編輯：我認爲這個問題是片斷輸出的視口比較小，吃了一些款式，你將有通過@media querys調整值，如果你想保持與你提供的代碼的響應能力：

Full resizable JSFiddle here（一些CSS改變了下面的代碼片段，使它看起來很好的更大的六ewport）

大視：

小視窗：從文本菜單

隔離圖標通過<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