Skip to content

Instantly share code, notes, and snippets.

@INDIAN2020

INDIAN2020/gist:10465157

Last active August 29, 2015 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save INDIAN2020/10465157 to your computer and use it in GitHub Desktop.
Save INDIAN2020/10465157 to your computer and use it in GitHub Desktop.
Download ZIP
highlight nav menu item in php
Raw
gistfile1.txt
foreach($menu as $key => $item){
if ($item[1]){
echo '<li class="selected"><a href="'.$item[0].'">'.$key.'</a></li>';
}
else{
echo '<li><a href="'.$item[0].'">'.$key.'</a></li>';
}
}
http://codepen.io/curtisblackwell/pen/lHysE
<!-- CLICK THE BUTTON TO OPEN THE MENU -->
<div id="nav-container">
<div id="nav-wrapper">
<div id="bg-disc"></div>
<div class="nav-btn" id="photos">Photos<span>&#x25b8;</span></div>
<div class="nav-btn" id="videos">Videos<span>&#x25b8;</span></div>
<div class="nav-btn" id="extras">Extras<span>&#x25b8;</span></div>
<div id="bottom-blue"></div>
<div id="btn-wrap">
<div id="mid-blue"></div>
<div id="icon"></div>
</div>
</div>
</div>
body{
margin: 0;
padding: 0;
font-family: 'Sonsie One', cursive;
font-size: 21px;
color: #298aca;
text-shadow: 0 1px 0 #fff;
background: #16212c;
}
#nav-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #16212c;
}
#nav-wrapper{
width: 700px;
height: 700px;
padding-left: 5%;
padding-top: 5%;
position: relative;
background: #16212c;
background: -moz-radial-gradient(center, ellipse cover, #213245 0%, #16212c 50%);
background: -webkit-gradient(radial, center center, 0px, center center, 50%, color-stop(0%,#213245), color-stop(50%,#16212c));
background: -webkit-radial-gradient(center, ellipse cover, #213245 0%,#16212c 50%);
background: -o-radial-gradient(center, ellipse cover, #213245 0%,#16212c 50%);
background: -ms-radial-gradient(center, ellipse cover, #213245 0%,#16212c 50%);
background: radial-gradient(ellipse at center, #213245 0%,#16212c 50%);
background-position: -130px -150px;
background-repeat: no-repeat;
}
#nav-wrapper div{
position: absolute;
}
#bg-disc{
width: 0;
height: 0;
background: #999;
border: 1px solid #fff;
box-shadow: inset 0 0 6px 2px #fff;
border-radius: 70px;
margin: 30px;
-moz-transition: width .2s linear, height .2s linear, margin .2s linear;
-webkit-transition: width .2s linear, height .2s linear, margin .2s linear;
transition: width .2s linear, height .2s linear, margin .2s linear;
}
#bg-disc:before{
content: '';
display: block;
border-radius: 70px;
width: 126px;
height: 126px;
margin: -25px;
box-shadow: 0 7px 15px #000;
-moz-transition: width .2s linear, height .2s linear, margin .2s linear;
-webkit-transition: width .2s linear, height .2s linear, margin .2s linear;
transition: width .2s linear, height .2s linear, margin .2s linear;
}
#bg-disc.active{
width: 140px;
height: 140px;
margin: 0;
}
#bg-disc.active:before{
width: 140px;
height: 140px;
margin: 0;
}
#bottom-blue{
background: #156499;
border: 1px solid #2bbbff;
box-shadow: inset 0 0 10px 2px #3497da;
width: 126px;
height: 126px;
border-radius: 68px;
margin-top: 7px;
margin-left: 7px;
}
#bottom-blue:before{
content: '';
display: block;
border-radius: 68px;
width: 126px;
height: 126px;
box-shadow: 0 0 10px 2px #444;
}
#mid-blue{
width: 106px;
height: 106px;
margin-top: 18px;
margin-left: 18px;
border-radius: 55px;
box-shadow: 0 0 10px 1px #222;
background: #3497da;
background: -moz-linear-gradient(top, #3497da 0%, #035890 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3497da), color-stop(100%,#035890));
background: -webkit-linear-gradient(top, #3497da 0%,#035890 100%);
background: -o-linear-gradient(top, #3497da 0%,#035890 100%);
background: -ms-linear-gradient(top, #3497da 0%,#035890 100%);
background: linear-gradient(to bottom, #3497da 0%,#035890 100%);
}
#mid-blue:after{
content: '';
display: block;
width: 106px;
height: 106px;
border-radius: 55px;
box-shadow: inset 0 0 10px 2px #1b77b4;
border: 2px solid #2d8ecf;
margin-top: -2px;
margin-left: -2px;
}
#icon{
width: 39px;
height: 5px;
border-bottom: 1px solid #8cbfe1;
border-top: 1px solid #454545;
border-radius: 3px;
margin-top: 68px;
margin-left: 51px;
background: #ebeff0;
background: -moz-linear-gradient(top, #ebeff0 0%, #94a4a5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebeff0), color-stop(100%,#94a4a5));
background: -webkit-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -o-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -ms-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: linear-gradient(to bottom, #ebeff0 0%,#94a4a5 100%);
}
#icon:before{
content: '';
display: block;
width: 39px;
height: 5px;
border-bottom: 1px solid #8cbfe1;
border-top: 1px solid #454545;
border-radius: 3px;
margin-top: -11px;
background: #ebeff0;
background: -moz-linear-gradient(top, #ebeff0 0%, #94a4a5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebeff0), color-stop(100%,#94a4a5));
background: -webkit-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -o-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -ms-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: linear-gradient(to bottom, #ebeff0 0%,#94a4a5 100%);
}
#icon:after{
content: '';
display: block;
width: 39px;
height: 5px;
border-bottom: 1px solid #8cbfe1;
border-top: 1px solid #454545;
border-radius: 3px;
margin-top: 13px;
background: #ebeff0;
background: -moz-linear-gradient(top, #ebeff0 0%, #94a4a5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebeff0), color-stop(100%,#94a4a5));
background: -webkit-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -o-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: -ms-linear-gradient(top, #ebeff0 0%,#94a4a5 100%);
background: linear-gradient(to bottom, #ebeff0 0%,#94a4a5 100%);
}
.nav-btn{
overflow: hidden;
position: relative;
height: 28px;
width: 0;
border: 1px solid #ebeff0;
box-shadow: 0 2px 10px #000;
border-radius: 0 15px 15px 0;
padding: 2px 10px 0 0;
text-align: right;
margin-top: 55px;
margin-left: 70px;
cursor: pointer;
-moz-transition: width .3s;
-webkit-transition: width .3s;
transition: width .3s;
transition-delay: .25s;
-webkit-transition-delay: .25s;
background: #e7e7e7;
background: -moz-linear-gradient(top, #ffffff 0%, #bcc2c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcc2c6));
background: -webkit-linear-gradient(top, #ffffff 0%,#bcc2c6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#bcc2c6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#bcc2c6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#bcc2c6 100%);
}
.nav-btn#photos{
margin-top: 19px;
-moz-transition: width .25s;
-webkit-transition: width .25s;
transition: width .25s;
transition-delay: .25s;
-webkit-transition-delay: .25s;
}
.nav-btn#extras{
margin-top: 91px;
-moz-transition: width .35s;
-webkit-transition: width .35s;
transition: width .35s;
transition-delay: .25s;
-webkit-transition-delay: .25s;
}
.nav-btn span{
margin-left: 15px;
}
.nav-btn.active{
width: 266px;
}
.nav-btn.active:hover, .nav-btn#photos.active:hover, .nav-btn#extras.active:hover{
width: 286px;
color: #2999fc;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
#btn-wrap{
cursor: pointer;
}
#mid-blue.active{
background: #035890;
background: -moz-linear-gradient(top, #035890 0%, #3497da 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#035890), color-stop(100%,#3497da));
background: -webkit-linear-gradient(top, #035890 0%,#3497da 100%);
background: -o-linear-gradient(top, #035890 0%,#3497da 100%);
background: -ms-linear-gradient(top, #035890 0%,#3497da 100%);
background: linear-gradient(to bottom, #035890 0%,#3497da 100%);
}
#btn-wrap:hover #mid-blue:after{
border-color: #2999fc;
box-shadow: inset 0 0 10px 2px #2999fc;
}
#icon.active, #icon.active:before, #icon.active:after{
background: #94a4a5;
background: -moz-linear-gradient(top, #94a4a5 0%, #ebeff0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94a4a5), color-stop(100%,#ebeff0));
background: -webkit-linear-gradient(top, #94a4a5 0%,#ebeff0 100%);
background: -o-linear-gradient(top, #94a4a5 0%,#ebeff0 100%);
background: -ms-linear-gradient(top, #94a4a5 0%,#ebeff0 100%);
background: linear-gradient(to bottom, #94a4a5 0%,#ebeff0 100%);
}
JQUERY
$('#btn-wrap').click(function(){
if($('#mid-blue').hasClass('active')){
$('#mid-blue, #icon, .nav-btn, #bg-disc').removeClass('active');
}else{
$('#mid-blue, #icon, .nav-btn, #bg-disc').addClass('active opening').removeClass('opening');
}
});
----------------------------------------------------------
<!-- BUTTON -->
<div id="button">Button &#x25b8;</div>
<!-- CHECKBOXES -->
<ul id="checklist">
<li><label class="check-label" for="checkbox"><input id="checkbox" type="checkbox" /><span></span></label></li>
<li><label class="check-label" for="checkbox2"><input id="checkbox2" type="checkbox" /><span></span></label></li>
<li><label class="check-label" for="checkbox3"><input id="checkbox3" type="checkbox" /><span></span></label></li>
</ul>
<!-- SWITCH -->
<label id="switch" for="checkswitch"><input id="checkswitch" type="checkbox" /><span id="switchbg"><span id="switchhead"></span></span></label>
NORMAL
html{
background: #333;
padding: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#button, #checklist, #switch{
float: left;
}
#button{
cursor: pointer;
padding: 12px 0;
width: 120px;
text-align: center;
border-radius: 5px;
background: #3498db;
border: none;
color: #ecf0f1;
font-weight: bold;
text-shadow: 0 -1px 0 #2980b9;
box-shadow: 0 3px 0 1px #222, inset 0 1px 0 #3aafff;
-webkit-transition: .05s linear;
-moz-transition: .05s linear;
transition: .05s linear;
}
#button:active{
background: #2980b9;
margin-top: 2px;
color: #bdc3c7;
box-shadow: 0 0 0 1px #222, inset 0 1px 0 #3aafff;
}
#checklist{
margin: 0;
padding: 0;
}
#checklist li{
list-style: none;
padding-bottom: 5px;
}
input[type=checkbox]{
display: none;
margin-left: -999999px;
}
.check-label span{
display: block;
cursor: pointer;
width: 30px;
position: relative;
margin: 5px 20px;
height: 30px;
border-radius: 5px;
background: #3498db;
border: none;
color: #ecf0f1;
font-weight: bold;
text-shadow: 0 -1px 0 #2980b9;
box-shadow: 0 3px 0 1px #222, inset 0 1px 0 #3aafff;
-webkit-transition: .05s linear;
-moz-transition: .05s linear;
transition: .05s linear;
}
.check-label span:hover{
background: #2980b9;
}
.check-label span:after{
content:'\2190 Click this checkbox';
font-size: 13px;
font-weight: normal;
width: 150px;
position: absolute;
left: 100%;
top: 50%;
margin-top: -8px;
margin-left: 5px;
text-shadow: 0 1px 0 #222;
}
.check-label input:checked + span{
background: #222;
box-shadow: 0 1px 0 #444, inset 0 3px 0 #111;
}
.check-label input:checked + span:before{
content:'x';
font-size: 20px;
color: #3498db;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
text-shadow: 0 2px 0 #111;
margin-top: -12px;
}
.check-label input:checked + span:after{
content:'\2190 Checked!'
}
#switch span{
display: block;
}
#switchbg{
background: #222;
margin-top: 6px;
width: 80px;
height: 24px;
margin-left: 140px;
border-radius: 20px;
box-shadow: 0 1px 0 #444, inset 0 3px 0 #111;
position: relative;
}
#switchbg #switchhead{
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 2px;
left: 2px;
background: #3498db;
box-shadow: 0 1px 0 1px #222, inset 0 1px 0 #3aafff;
cursor: pointer;
-webkit-transition: .15s linear;
-moz-transition: .15s linear;
transition: .15s linear;
}
#switchbg:after{
content: 'OFF';
display: block;
position: absolute;
right: 10px;
top: 5px;
color: #444;
}
#switch input:checked + #switchbg #switchhead{
left: 100%;
margin-left: -22px;
background: #333;
box-shadow: 0 1px 0 #3aafff, inset 0 1px 0 #222;
}
#switch input:checked + #switchbg{
background: #3498db;
box-shadow: 0 1px 0 #111, inset 0 1px 0 #3aafff;
}
#switch input:checked + #switchbg:after{
content: 'ON';
left: 10px;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment