Skip to content

Instantly share code, notes, and snippets.

@ryoco

ryoco/jsdoit.css

Created December 25, 2012 14:42
Show Gist options
  • Save ryoco/4373520 to your computer and use it in GitHub Desktop.
Save ryoco/4373520 to your computer and use it in GitHub Desktop.
Download ZIP
popup select icons
Raw
jsdoit.css
body {
background-color: #3ff5d4;
font: 30px sans-serif;
}
#menu_button a{
text-decoration:none;
-webkit-border-radius: 5px;
border: 3px #000000 solid;
padding: 6px 6px;
}
#menu_button a:link{
color:f0f0f0;
}
#menu_button :visited {
color:#0f0f0f;
}
#menu_button a:hover {
color:#eeeeee;
}
#part_area{
margin: 0 auto;
-webkit-border-radius: 20px;
border: 3px #3f99dd solid;
background-color: #ff8899;
display: none;
width: 300px;
height: 300px;
}
#close_area{
margin-right: 15px;
text-align: right;
}
#close_button {
border: 0px #3f99dd solid;
}
#icons_area{
margin: 0 auto;
}
ul li{
height:60px;
float:left;
}
ul.x4>li{
width:75px;
}
ul.icons li.x4 img{
width:100px;
height:60px;
}
#part_area ul {
margin: 0px;
padding: 0px;
position: relative;
}
Raw
jsdoit.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="menu_button">
<a href="#">push</a>
</div>
<div class="navi" id="part_area">
<div id="close_area">
<span id="close_button">?</span>
</div>
<div id="icons_area">
<ul class="icons x4">
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/r/G/p/O/rGpO3.png" /></a></li>
</ul>
</div>
</div>
</body>
</html>
Raw
jsdoit.js
$(function(){
$("#menu_button").click(function(){
$("#part_area").show();
$("#menu_button").hide();
});
$("#close_button").click(function(){
$("#part_area").hide();
$("#menu_button").show();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment