6

Toggle Element (Dropdown/Menu) Visibility with CSS

 2 years ago
source link: http://siongui.github.io/2015/02/07/toogle-element-visibility-with-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Toggle Element (Dropdown/Menu) Visibility with CSS

February 07, 2015

Toggling element without the hassle of JavaScript is a good design choice for the application of dropdown/menu on a fast, responsive, mobile-friendly website. After consulting Google, the posts [1] and [2] are good tutorials for me. The following is my result.

Please first check:

Demo

Source Code for Demo (html):

toogle-element-visibility-with-css.html | repository | view raw 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toggle Element Visibilty with CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </style>
</head>
<body>

<div class="container">
  <div class="toggleable-window">
    <input class="toggle" type="checkbox" id="punch" checked>
    <label for="punch">≡</label>
    <div class="content">content<br>content<br>content</div>
  </div>
</div>

</body>
</html>

Source Code for Demo (css):

style.css | repository | view raw 

/* pure css toggle-able window */
.toggleable-window input.toggle {
  display: none;
}

.toggleable-window label {
  font-size: 3em;
  font-weight:bold;
}

.toggleable-window label:hover,
.toggleable-window label:focus {
  cursor: pointer;
}

.toggleable-window input.toggle:checked ~ label {
  font-weight:normal;
}

.toggleable-window input.toggle:checked ~ div {
  display: none;
}


.toggleable-window div {
  position: absolute;
  width: 100%;
  background: yellow;
}

.container {
  position: relative;
  width: 10em;
}

If you prefer to use SASS for your CSS writing, here is the SCSS equivalent of above CSS:

style.scss | repository | view raw 

/* pure css toggle-able window */
.toggleable-window {
  input.toggle {display: none;}
  label {
    font-size: 3em;
    font-weight:bold;
    &:hover, &:focus {
      cursor: pointer;
    }
  }
  input.toggle:checked ~ label {font-weight:normal;}
  input.toggle:checked ~ div {display: none;}
  div {
    position: absolute;
    width: 100%;
    background: yellow;
  }
}

.container {
  position: relative;
  width: 10em;
}

References:

[3][AngularJS] Toggle Element without JavaScript

[4][AngularJS] Dropdown Menu Using Directive


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK