Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw

rileyjshaw/Nested-Radio-Menu.markdown

Created October 16, 2013 08:48
Show Gist options
  • Save rileyjshaw/7004686 to your computer and use it in GitHub Desktop.
Save rileyjshaw/7004686 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Riley Shaw.
Raw
index.html
<head>
<link href='http://fonts.googleapis.com/css?family=Scada:400italic' rel='stylesheet' type='text/css'>
</head>
<nav>
<input type = "radio"
name = "year"
id = "d_2013"
checked = "checked" />
<label for="d_2013" class="year">Year</label>
<div>
<input type = "radio"
name = "d_2013"
id = "d_2013_01"
checked = "checked" />
<label for="d_2013_01" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2013_01"
id = "d_2013_01_31"
checked = "checked" />
<label for="d_2013_01_31" class="day">Day</label>
<input type = "radio"
name = "d_2013_01"
id = "d_2013_01_30" />
<label for="d_2013_01_30" class="day">Day</label>
<input type = "radio"
name = "d_2013_01"
id = "d_2013_01_29" />
<label for="d_2013_01_29" class="day">Day</label>
</div>
<input type = "radio"
name = "d_2013"
id = "d_2013_02" />
<label for="d_2013_02" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2013_02"
id = "d_2013_02_31"
checked = "checked" />
<label for="d_2013_02_31" class="day">Day</label>
<input type = "radio"
name = "d_2013_02"
id = "d_2013_02_30" />
<label for="d_2013_02_30" class="day">Day</label>
<input type = "radio"
name = "d_2013_02"
id = "d_2013_02_29" />
<label for="d_2013_02_29" class="day">Day</label>
</div>
<input type = "radio"
name = "d_2013"
id = "d_2013_03" />
<label for="d_2013_03" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2013_03"
id = "d_2013_03_31"
checked = "checked" />
<label for="d_2013_03_31" class="day">Day</label>
<input type = "radio"
name = "d_2013_03"
id = "d_2013_03_30" />
<label for="d_2013_03_30" class="day">Day</label>
<input type = "radio"
name = "d_2013_03"
id = "d_2013_03_29" />
<label for="d_2013_03_29" class="day">Day</label>
</div>
</div>
<input type = "radio"
name = "year"
id = "d_2012" />
<label for="d_2012" class="year">Year</label>
<div>
<input type = "radio"
name = "d_2012"
id = "d_2012_01"
checked = "checked" />
<label for="d_2012_01" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2012_01"
id = "d_2012_01_31"
checked = "checked" />
<label for="d_2012_01_31" class="day">Day</label>
<input type = "radio"
name = "d_2012_01"
id = "d_2012_01_30" />
<label for="d_2012_01_30" class="day">Day</label>
<input type = "radio"
name = "d_2012_01"
id = "d_2012_01_29" />
<label for="d_2012_01_29" class="day">Day</label>
</div>
<input type = "radio"
name = "d_2012"
id = "d_2012_02" />
<label for="d_2012_02" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2012_02"
id = "d_2012_02_31"
checked = "checked" />
<label for="d_2012_02_31" class="day">Day</label>
<input type = "radio"
name = "d_2012_02"
id = "d_2012_02_30" />
<label for="d_2012_02_30" class="day">Day</label>
<input type = "radio"
name = "d_2012_02"
id = "d_2012_02_29" />
<label for="d_2012_02_29" class="day">Day</label>
</div>
<input type = "radio"
name = "d_2012"
id = "d_2012_03" />
<label for="d_2012_03" class="month">Month</label>
<div>
<input type = "radio"
name = "d_2012_03"
id = "d_2012_03_31"
checked = "checked" />
<label for="d_2012_03_31" class="day">Day</label>
<input type = "radio"
name = "d_2012_03"
id = "d_2012_03_30" />
<label for="d_2012_03_30" class="day">Day</label>
<input type = "radio"
name = "d_2012_03"
id = "d_2012_03_29" />
<label for="d_2012_03_29" class="day">Day</label>
</div>
</div>
</nav>
Raw
Nested-Radio-Menu.markdown

Nested Radio Menu

Trying to make a semantic vertical menu using nested radio buttons and CSS.

A Pen by Riley Shaw on CodePen.

License.

Raw
style.sass
@import "compass"
=menu-color($color)
background-color: $color
&:hover
background-color: $color + #070707
\:checked + &
background-color: $color + #202
*
box-sizing: border-box
html, body
background: #055
font-family: 'Scada', sans-serif
font-style: italic
overflow: hidden
color: #333
nav
border: 10px solid #004949
margin: auto
position: absolute
top: 50%
left: 50%
width: 240px
margin: -192px -120px 0
label
position: relative
display: block
height: 48px
line-height: 48px
width: 100%
padding-left: 24px
text-align: left
&:hover
cursor: pointer
\:checked + &
cursor: default
&:after
content: ''
position: absolute
top: (48px - 8px) / 2
right: (48px - 8px) / 4
height: 0
width: 0
border-top: 8px solid #333
border-left: 5px solid transparent
border-right: 5px solid transparent
opacity: 0
+transition(opacity 0)
&:hover:after
opacity: 1
+transition(opacity 250ms)
\:checked + &
opacity: 0
&.day:after
+rotate(270deg)
.year
+menu-color(#999)
.month
+menu-color(#bbb)
.day
+menu-color(#ddd)
input
display: none
visibility: hidden
label ~ div
max-height: 0
overflow: hidden
+transition(max-height 500ms)
\:checked + label + div
max-height: 1000px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment