Dropdown menu

@ September 8, 2012 8 button, dropdown, menu,

* ( $Tweet 4 View source 2 Fullscreen 3

I had this idea in my mind for quite long: use :focus state instead of checkbox to determine other element style and this is effect ;). Broken on mobile :(

5 Back

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dropdown menu - Design it & Code it</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>

  <div class="dropdown">
    <span class="dropdown-toggle" tabindex="0"></span>
    <div class="dropdown-text">Account</div>
    <ul class="dropdown-content">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>

</body>
</html>

CSS

html {
  background: #fff url(img/bg.png);
  font-size: 75%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin: 110px auto 0 auto;
  width: 100%;
  max-width: 260px;
  text-align: center;
}

a {
  text-decoration: none;
}
/*
 * Dropdown menu
 */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text::-moz-selection,
.dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
.dropdown-text::selection,
.dropdown-toggle::selection { background: transparent; color: inherit; }

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: .25s ease;
  -moz-transition: .25s ease;
  -ms-transition: .25s ease;
  -o-transition: .25s ease;
  transition: .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  border-color: #c5c5c5;
  box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}