CODEWITHSUNDEEP
htmlcss
kirktoon1882
kirktoon1882

Reputation: 1231

Using CSS, making a menu button clickable

I'm creating the menu on a mobile website and I'm making the menu button with CSS rather than using an image. I can't seem to make the whole menu button clickable, only the first horizontal line of the menu icon is clickable. What I need to do is make the whole button, plus 10px padding around the button clickable. Here's what I've got so far:

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

Upvotes: 0

Views: 944

Answers (3)

Bishan
Bishan

Reputation: 401

Your css and html isn't clear that much. You don't want to do this much of code lines to do above task. I'l suggest simple solution for your prob.

Add this css style to your .css file

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

And add this little code line to your .html file

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

I think this is the solution you hope.

Upvotes: 0

Spencer
Spencer

Reputation: 96

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

This can be achieved by putting the link inside the div and giving it a width and height.

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

Upvotes: 1

Billy
Billy

Reputation: 2448

because there is nothing in it, either add a   or some content then add padding, notice the border goes to the next line due to the div inside,these are inproper nesting, you should look into changing them for an unordered list with li's

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

Upvotes: 0

Related Questions