2015-07-08 7 views
0

Я пытаюсь создать сайт, но я наткнулся на небольшую проблему. Я использую фрагмент из bootsnipp (боковое меню), я не могу заставить его работать, поэтому ссылка будет охватывать весь LI вместо этого вы должны нажать на текст это сам , если я изменить его таким образом, будет сидеть перед литий выглядит от , как я могу исправить эту Ссылка на чик: http://bootsnipp.com/snippets/featured/responsive-navigation-menuСсылка внутри LI не покрывает весь LI

Мой код: HTML:

<div class="nav-side-menu" style="float: left; position: fixed; width: 15.6%;"> 
<div class="brand"><img alt="Brand" src="includes/img/LogoTest1.png" width="10%"> <b>Craft-List.net</b></div> 
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
    <div class="menu-list"> 
     <ul id="menu-content" class="menu-content collapse out"> 
      <li class="active"><a href="/beta/index"><i class="glyphicon glyphicon-home"></i> Home</a></li> 
      <li class=""><a href="#"><i class="glyphicon glyphicon-user"></i> Members</a></li> 
      <li class=""><a href="#"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li> 
      <li class=""><a href="#"><i class="glyphicon glyphicon-question-sign"></i> About</a></li> 
      <li class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Login/Register</a></li> 
     </ul> 
</div> 

CSS:

.nav-side-menu { 
    overflow: auto; 
    font-family: verdana; 
    font-size: 12px; 
    font-weight: 200; 
    background-color: #2e353d; 
    position: fixed; 
    top: 0px; 
    width: 300px; 
    height: 100%; 
    color: #e1ffff; 
} 
.nav-side-menu .brand { 
    background-color: #23282e; 
    line-height: 50px; 
    display: block; 
    text-align: center; 
    font-size: 14px; 
} 
.nav-side-menu .toggle-btn { 
    display: none; 
} 
.nav-side-menu ul, 
.nav-side-menu li { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    line-height: 35px; 
    cursor: pointer; 
    /*  
    .collapsed{ 
     .arrow:before{ 
       font-family: FontAwesome; 
       content: "\f053"; 
       display: inline-block; 
       padding-left:10px; 
       padding-right: 10px; 
       vertical-align: middle; 
       float:right; 
      } 
    } 
*/ 
} 
.nav-side-menu ul :not(collapsed) .arrow:before, 
.nav-side-menu li :not(collapsed) .arrow:before { 
    font-family: FontAwesome; 
    content: "\f078"; 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    vertical-align: middle; 
    float: right; 
} 
.nav-side-menu ul .active, 
.nav-side-menu li .active { 
    border-left: 3px solid #d19b3d; 
    background-color: #4f5b69; 
} 
.nav-side-menu ul .sub-menu li.active, 
.nav-side-menu li .sub-menu li.active { 
    color: #d19b3d; 
} 
.nav-side-menu ul .sub-menu li.active a, 
.nav-side-menu li .sub-menu li.active a { 
    color: #d19b3d; 
} 
.nav-side-menu ul .sub-menu li, 
.nav-side-menu li .sub-menu li { 
    background-color: #181c20; 
    border: none; 
    line-height: 28px; 
    border-bottom: 1px solid #23282e; 
    margin-left: 0px; 
} 
.nav-side-menu ul .sub-menu li:hover, 
.nav-side-menu li .sub-menu li:hover { 
    background-color: #020203; 
} 
.nav-side-menu ul .sub-menu li:before, 
.nav-side-menu li .sub-menu li:before { 
    font-family: FontAwesome; 
    content: "\f105"; 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    vertical-align: middle; 
} 
.nav-side-menu li { 
    padding-left: 0px; 
    border-left: 3px solid #2e353d; 
    border-bottom: 1px solid #23282e; 
} 
.nav-side-menu li a { 
    text-decoration: none; 
    color: #e1ffff; 
} 
.nav-side-menu li a i { 
    padding-left: 10px; 
    width: 20px; 
    padding-right: 20px; 
} 
.nav-side-menu li:hover { 
    border-left: 3px solid #d19b3d; 
    background-color: #4f5b69; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 
@media (max-width: 767px) { 
    .nav-side-menu { 
    position: relative; 
    width: 100%; 
    margin-bottom: 10px; 
    } 
    .nav-side-menu .toggle-btn { 
    display: block; 
    cursor: pointer; 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    z-index: 10 !important; 
    padding: 3px; 
    background-color: #ffffff; 
    color: #000; 
    width: 40px; 
    text-align: center; 
    } 
    .brand { 
    text-align: left !important; 
    font-size: 22px; 
    padding-left: 20px; 
    line-height: 50px !important; 
    } 
} 
@media (min-width: 767px) { 
    .nav-side-menu .menu-list .menu-content { 
    display: block; 
    } 
} 
body { 
    margin: 0px; 
    padding: 0px; 
} 

Причина, почему я прошу его здесь потому, что надрез выглядел немного мертвым и старый Lastest комментарий был 4 месяца назад.

также я довольно новичок в css & html i code more php than design stuff: | во всяком случае, я бы хотел увидеть что-нибудь с примером, если это будет слишком барабанный простой текст будет работать

Заранее благодарен!

+0

@HiddenHobbes да я не осмелился бы забыть это;) – Timo

ответ

1

Ваши li элементы имеют очень толстые границы 3px цветной #D19B3D. Просто беря это border и создавая тэг anchor, 'display:block должен помочь вам в достижении того, что вы ищете.

Просто для ясности, я добавил hover влияние на anchor элемента, чтобы показать вам, что anchor действительно охватывают всю ширину li.

.nav-side-menu { 
 
    overflow: auto; 
 
    font-family: verdana; 
 
    font-size: 12px; 
 
    font-weight: 200; 
 
    background-color: #2e353d; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 300px; 
 
    height: 100%; 
 
    color: #e1ffff; 
 
} 
 

 
    .nav-side-menu .brand { 
 
     background-color: #23282e; 
 
     line-height: 50px; 
 
     display: block; 
 
     text-align: center; 
 
     font-size: 14px; 
 
    } 
 

 
    .nav-side-menu .toggle-btn { 
 
     display: none; 
 
    } 
 

 
    .nav-side-menu ul, 
 
    .nav-side-menu li { 
 
     list-style: none; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     line-height: 35px; 
 
     cursor: pointer; 
 
     /*  
 
    .collapsed{ 
 
     .arrow:before{ 
 
       font-family: FontAwesome; 
 
       content: "\f053"; 
 
       display: inline-block; 
 
       padding-left:10px; 
 
       padding-right: 10px; 
 
       vertical-align: middle; 
 
       float:right; 
 
      } 
 
    } 
 
*/ 
 
    } 
 

 
     .nav-side-menu ul :not(collapsed) .arrow:before, 
 
     .nav-side-menu li :not(collapsed) .arrow:before { 
 
      font-family: FontAwesome; 
 
      content: "\f078"; 
 
      display: inline-block; 
 
      padding-left: 10px; 
 
      padding-right: 10px; 
 
      vertical-align: middle; 
 
      float: right; 
 
     } 
 

 
     .nav-side-menu ul .active, 
 
     .nav-side-menu li .active { 
 
      background-color: #4f5b69; 
 
     } 
 

 
     .nav-side-menu ul .sub-menu li.active, 
 
     .nav-side-menu li .sub-menu li.active { 
 
      color: #d19b3d; 
 
     } 
 

 
      .nav-side-menu ul .sub-menu li.active a, 
 
      .nav-side-menu li .sub-menu li.active a { 
 
       color: #d19b3d; 
 
      } 
 

 
     .nav-side-menu ul .sub-menu li, 
 
     .nav-side-menu li .sub-menu li { 
 
      background-color: #181c20; 
 
      border: none; 
 
      line-height: 28px; 
 
      border-bottom: 1px solid #23282e; 
 
      margin-left: 0px; 
 
     } 
 

 
      .nav-side-menu ul .sub-menu li:hover, 
 
      .nav-side-menu li .sub-menu li:hover { 
 
       background-color: #020203; 
 
      } 
 

 
      .nav-side-menu ul .sub-menu li:before, 
 
      .nav-side-menu li .sub-menu li:before { 
 
       font-family: FontAwesome; 
 
       content: "\f105"; 
 
       display: inline-block; 
 
       padding-left: 10px; 
 
       padding-right: 10px; 
 
       vertical-align: middle; 
 
      } 
 

 
    .nav-side-menu li { 
 
     padding-left: 0px; 
 
     border-bottom: 1px solid #23282e; 
 
    } 
 

 
     .nav-side-menu li a { 
 
      display: block; 
 
      text-decoration: none; 
 
      color: #e1ffff; 
 
     } 
 

 
     .nav-side-menu li a:hover { 
 
      background-color: orange; 
 
     } 
 

 
      .nav-side-menu li a i { 
 
       padding-left: 10px; 
 
       width: 20px; 
 
       padding-right: 20px; 
 
      } 
 

 
     .nav-side-menu li:hover { 
 
      background-color: #4f5b69; 
 
      -webkit-transition: all 1s ease; 
 
      -moz-transition: all 1s ease; 
 
      -o-transition: all 1s ease; 
 
      -ms-transition: all 1s ease; 
 
      transition: all 1s ease; 
 
     } 
 

 
@media (max-width: 767px) { 
 
    .nav-side-menu { 
 
     position: relative; 
 
     width: 100%; 
 
     margin-bottom: 10px; 
 
    } 
 

 
     .nav-side-menu .toggle-btn { 
 
      display: block; 
 
      cursor: pointer; 
 
      position: absolute; 
 
      right: 10px; 
 
      top: 10px; 
 
      z-index: 10 !important; 
 
      padding: 3px; 
 
      background-color: #ffffff; 
 
      color: #000; 
 
      width: 40px; 
 
      text-align: center; 
 
     } 
 

 
    .brand { 
 
     text-align: left !important; 
 
     font-size: 22px; 
 
     padding-left: 20px; 
 
     line-height: 50px !important; 
 
    } 
 
} 
 

 
@media (min-width: 767px) { 
 
    .nav-side-menu .menu-list .menu-content { 
 
     display: block; 
 
    } 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
}
<div class="nav-side-menu" style="float: left; position: fixed; width: 15.6%;"> 
 
<div class="brand"><img alt="Brand" src="includes/img/LogoTest1.png" width="10%"> <b>Craft-List.net</b></div> 
 
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
 
    <div class="menu-list"> 
 
     <ul id="menu-content" class="menu-content collapse out"> 
 
      <li class="active"><a href="/beta/index"><i class="glyphicon glyphicon-home"></i> Home</a></li> 
 
      <li class=""><a href="#"><i class="glyphicon glyphicon-user"></i> Members</a></li> 
 
      <li class=""><a href="#"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li> 
 
      <li class=""><a href="#"><i class="glyphicon glyphicon-question-sign"></i> About</a></li> 
 
      <li class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Login/Register</a></li> 
 
     </ul> 
 
</div>

Надеется, что это помогает !!!

+0

Это прояснилось для меня много: D спасибо за ваша помощь :) – Timo

+0

Добро пожаловать! Рад помочь !!! :) –

2

Я думаю, вам нужно будет поместить display: block; в элемент a, у которого display: inline; по умолчанию.

.nav-side-menu li a { 
    display: block; 
} 
+0

Это не работает :(и только ради тестирования я пытался использовать дисплей: inline; слишком byt не работает :( – Timo

+0

Это работает для меня , например http://jsfiddle.net/skeurentjes/pogwehhy/1/ – SKeurentjes

+0

Это был мой кеш, раздражающий меня на этот раз, когда вы в сочетании с @Satwik Nadkarny помогли мне исправить это: D – Timo

Смежные вопросы