Использование CSS, нажатие кнопки меню

Я создаю меню на мобильном сайте, и я делаю кнопку меню с помощью CSS вместо использования изображения. Кажется, я не могу сделать нажатой кнопку всего меню, только первая горизонтальная линия значка меню можно щелкнуть. Что мне нужно сделать, это сделать целую кнопку, плюс 10px отступы вокруг кнопки clickable. Вот что у меня до сих пор:Использование CSS, нажатие кнопки меню

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Test website</title> 
<style> 
*, 
*:before, 
*:after { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing:   border-box; 
} 
body,html { 
margin:0; 
padding:0; 
} 
.red-container{ 
    position:fixed; 
right: 0; 
top: 0; 
left: 0; 
width:100%; 
background-color:#cc0000; 
padding:0.5em 1em 0.5em 1em; 
font-family: Arial, Helvetica, sans-serif; 
color: #FFFFFF; 
font-size: 1.8em; 
font-weight:700; 
} 
.red-container:before { 
    content: 'Page'; 
display: inline-block; 
vertical-align: middle; 
} 
.right-menu-btn-wrapper{ 
    display: inline-block; 
position: relative; 
float:right; 
padding: 0.1em; 
vertical-align: middle; 
background-color: #0000ee; 
} 

.white-menu-btn { 
display: inline-block; 
position: relative; 
float: right; 
vertical-align: middle; 
padding-right: 0.5em; 
cursor: pointer; 
} 
.white-menu-btn:before { 
content: ""; 
position: absolute; 
left: 0; 
top: 0.25em; 
width: 1em; 
height: 0.15em; 
background: white; 
box-shadow: 
    0 0.25em 0 0 white, 
    0 0.5em 0 0 white; 
} 
</style> 
</head> 
<body> 
<!-- Red Header --> 
<div class="red-container"> 
<a href="#" class="right-menu-btn-wrapper"> 
<div class="white-menu-btn"> 
</div></a> 
</div> 
<!-- END Red Header --> 
</body> 
</html>

источник

2015-02-03 kirktoon1882

Невозможно щелкнуть тень камеры: D должен отредактировать код! – KARC

http://codepen.io/anon/pen/emGMVr

Этого можно достичь, поместив ссылку внутри div и придав ей ширину и высоту.

.white-menu-btn { 
display: block; 
position: relative; 
float: right; 
height: 30px; 
width: 30px; 
vertical-align: middle; 
padding-right: 0.5em; 
cursor: pointer; 
} 

<div class="white-menu-btn"> 
     <a href="#" class="right-menu-btn-wrapper"> 
     </a> 
    </div>

источник

2015-02-03 17:02:43 Spencer

, потому что нет ничего в нем, либо добавить или некоторое содержание затем добавить отступы, обратите внимание, граница переходит к следующей строке в связи с DIV внутри, это inproper вложенности, вы должны смотреть на изменение их для неупорядоченного списка с Ли

.right-menu-btn-wrapper{border:1px solid red;} 
 
.second-right-menu-btn-wrapper{border:1px solid green;}

<a href="#" class="right-menu-btn-wrapper"> 
 
<div class="white-menu-btn"> 
 
</div></a> 
 
<a href="#" class="second-right-menu-btn-wrapper">second button 
 
<div class="white-menu-btn"> 
 
</div></a>

источник

2015-02-03 17:00:41 Billy

Ваш css и html не ясно, что много. Вы не хотите делать эту часть строк кода, чтобы выполнять над собой задачу. Я предлагаю простое решение для вашей проблемы.

Добавить этот CSS стиль вашего .css файла

.buttonNew{ 
width:100px; 
height:50px; 
padding:10px; 
background-color:#fff; 
color:blue; 
}

И добавить немного кода в свой файл .html

<div class="red-container"> 
<a href="#" class="buttonNew">Button</a> 
</div>

Я думаю, что это решение вы надеетесь.

источник

2015-02-03 17:42:51 Bishan

Использование CSS, нажатие кнопки меню

ответ

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