JSFiddle - React, Tailwind, and code Playground
by ufuri
HTML
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<div id="menu">
<ul>
<li class="link active">
<h3 class="active">Az Kişinin Bildiği Süper Şarkılar</h3>
<ul class="submenu">
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=1">1</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=2">2</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=3">3</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=4">4</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=5">5</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=6">6</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=7">7</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=8">8</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=9">9</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=10">10</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=11">11</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=12">12</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=13">13</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=14">14</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=15">15</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=16">16</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=17">17</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=18">18</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=19">19</a></li>
<li><a href="index.php?page=az-kisinin-bildigi-super-sarkilar&id=20">20</a></li>
<li><a...CSS
/*Basic reset*/
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0; padding: 0;}
body {
background: -webkit-linear-gradient(180deg, #2c3e50 10%, #3498db 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(180deg, #2c3e50 10%, #3498db 90%); /* FF3.6+ */
background: -ms-linear-gradient(180deg, #2c3e50 10%, #3498db 90%); /* IE10 */
background: -o-linear-gradient(180deg, #2c3e50 10%, #3498db 90%); /* Opera 11.10+ */
background: linear-gradient(180deg, #2c3e50 10%, #3498db 90%); /* W3C */
background-repeat: no-repeat;
background-color: #3498db;
}
@font-face {
font-family: "eksimelodi";
src: url(Typo Grotesk Demo.otf);
}
/*MAIN*/
#container {
margin-left: auto;
margin-right: auto;
max-width: 960px;
height:auto;
}
/*HEADER*/
#header{
width:100%;
background: #101010;
height:55px;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5);
box-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.logo {
left: 20%;
position:absolute;
margin-top:5px;
}
/*MAINBODY*/
#mainbody {
float:left;
position:relative;
width:66%;
height:auto;
padding: 50px 50px;
}
.youtube {
border-width:1px;
border-style:solid;
border-color:#C0C0C0;
}
/*MENU*/
#menu {
float:left;
background: #323232;
width: 300px;
margin: 50px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(100, 100, 100, 0.0);
border-width:1px;
border-style:solid;
border-color:#000000;
}
/*heading styles*/
#menu h3 {
font-family: "eksimelodi", arial, sans-serif;
font-size: 12px;
line-height: 28px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(to bottom, rgba(40,40,40,1) 0%,rgba(28,28,28,1) 44%,rgba(0,4,22,1)...JavaScript
/*jQuery time*/
$(document).ready(function(){
$("#menu h3").click(function(){
//slide up all the link lists
$("#menu ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})