CSS и HTML для меню

Мне просто нужно, чтобы каждая кнопка цели была нажата, а не только текст, когда вы наводили на нее курсор. Раньше это работало, но я общался с некоторыми вещами, а теперь вернулся к тому, чтобы читать текст только как <a href.CSS и HTML для меню

есть то, что я получил. (PS Я еще новичок в такого рода обучения себя, как я продвигаюсь)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#menubar { 
    width: 200px; 
    height: 50px; 
    background: black; 
    text-decoration: none; 
    transition: all .25s; 
    -webkit-transition: all .25s; 
    background: linear-gradient(silver, black); 
    background: -webkit-linear-gradient(silver,black); 
} 

#menubar:hover { 
    width: 225px; 
    background: linear-gradient(lightskyblue, blue); 
    background: -webkit-linear-gradient(lightskyblue,blue); 
} 
/* Code to make whole menu bar div clickable */ 
.default-link{ 
    position:absolute; 
    width:200px; 
    height:50px; 
} 

#menubar ul { 
    list-style-type: none; 
    padding: 10px; 
    margin: 0 50px; 
} 

#menubar ul li a { 
    color: white; 
    font-size:25px; 
    text-decoration:none; 
    position:inherit; 
} 

.auto-style1 { 
    margin-left: 0px; 
} 

</style> 
</head> 
<body> 

<!--Left Side Menu Bar Code--> 
<div id="menubar"> 
    <ul> 
     <li class="auto-style1" style="width: 137px"> 
      <a class='default-link' href='javascript:void(0)'    onclick='window.location = "#"' style="left: 11px; top: 16px; width: 200px;  height: 50px"> 
      Menu 1</a> 
     </li> 
    </ul> 
</div> 

<div id="menubar"> 
    <ul> 
     <li> 
      <a class='default-link' href='javascript:void(0)'  onclick='window.location = "#"' style="left: 11px; top: 66px; width: 200px; height: 50px"> 
     Menu 2</a> 
    </li> 
</ul> 
</div> 

<div id="menubar"> 
    <ul> 
     <li> 
      <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 116px; width: 200px; height: 50px"> 
      Menu 3</a> 
     </li> 
    </ul> 
</div> 

<div id="menubar"> 
<ul> 
    <li> 
     <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 166px; width: 200px; height: 50px"> 
     Menu 4</a> 
    </li> 
</ul> 
</div> 

<div id="menubar"> 
<ul> 
    <li> 
     <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 216px; width: 200px; height: 50px"> 
     Menu 5</a> 
    </li> 
</ul> 
</div> 

<div id="menubar"> 
<ul> 
    <li> 
     <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 266px; width: 200px; height: 50px"> 
     Menu 6</a> 
    </li> 
</ul> 
</div> 



</body> 
</html>

источник

2015-06-25 Brandon Hall

id = "menubar" - атрибут id указывает уникальный идентификатор для HTML-элемента (значение должно быть уникальным в документе HTML). – Dmitriy

код разделили нужно много очистки .. Id является уникальный идентификатор, который может не используйте его повторно. Кроме того, вы можете оптимизировать свой код, есть много ненужных div и ul тегов.

Пожалуйста, проверьте это JSFiddle.

.menubar{ 
 
    padding:0; 
 
} 
 
.menubar li{ 
 
    width: 200px; 
 
    height: 50px; 
 
    background: black; 
 
    text-decoration: none; 
 
    transition: all .25s; 
 
    -webkit-transition: all .25s; 
 
    background: linear-gradient(silver, black); 
 
    background: -webkit-linear-gradient(silver, black); 
 
} 
 
.menubar li:hover { 
 
    width: 225px; 
 
    background: linear-gradient(lightskyblue, blue); 
 
    background: -webkit-linear-gradient(lightskyblue, blue); 
 
} 
 

 
/* Code to make whole menu bar div clickable */ 
 
.default-link { 
 
    position:absolute; 
 
    width:200px; 
 
    height:50px; 
 
    color: white; 
 
    font-size:25px; 
 
    text-decoration:none; 
 
} 
 
.menubar li{ 
 
    list-style-type: none; 
 
    padding: 10px; 
 
    margin: 0 50px; 
 
    position:relative; 
 
} 
 
.auto-style1 { 
 
    margin-left: 0px; 
 
}

<!--Left Side Menu Bar Code--> 
 
<ul class="menubar"> 
 
    <li class="auto-style1"> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 1</a> 
 
    </li> 
 
    <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 2</a> 
 

 
    </li> 
 
    <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 3</a> 
 

 
    </li> 
 
    <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 4</a> 
 

 
    </li> 
 
    <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 5</a> 
 

 
    </li> 
 
    <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'> 
 
    Menu 6</a> 
 

 
    </li> 
 
</ul>

Надеется, что это поможет.

источник

2015-06-25 06:11:58 Bhagya

CSS и HTML для меню

ответ

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