50memis - Accordion Menu

Accordion Menu

Haberler

Hava Durumu

ANKARA

Takvim

Radyo

/* Body Style Start */
.accordion-body {
max-height: 0;
margin-bottom: 0px;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
text-align: justify;
background-color: lightgrey;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
/* Body Style End */

.accordion {
border: 1px solid #358;
margin: 0 auto;
list-style: none;
overflow: hidden;
}

.accordion > * + * {
border-top: 1px solid #369;
}

.accordion-input:checked ~ .accordion-body {
background-color: lightgrey;
padding: 5px;
max-height: 1000px;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.accordion-input:checked ~ .accordion-heading > .accordion-heading-btn {
transform: rotate(0);
}

.accordion-heading-btn {
display: block;
width: 30px;
position: absolute;
top: 10px;
right: 0;
pointer-events: none;
transition: transform .3s ease;
transform: rotate(-180deg);
text-align: center;
font-size: 14px;
line-height: 1;
}

.accordion-input { 
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}

#navi {
	margin: 0;
	padding: 0;
	width: 100%;
}

#navi ul, #navi li{
	list-style-type: none;
	padding-top: 1px;
	font-weight: bold;
}

#navi li a {
	text-decoration: none;
	display: block;
	width:100%;
	padding: 1px;
}

#navi a:link, #navi a:visited {
	color: #FFFFFF;
	background-color: #003040;
}

#navi a:hover, #navi a:hover#akt {
	color: #FFFFFF;
	background-color: #004050;
}
</style>

<div>
<ul class="accordion">

<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item1" />
<label for="item1" class="accordion-heading"><i class="fa fa-bar-chart-o fa-fw"></i> Radyolar<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">

<li><a href="https://radyodinlesem.net/mobilplayer.php?radyoadresi=http://yayin.keyiffm.com:9116"target="Radyo">Keyf Fm</a></li> 
<li><a href="https://radyodinlesem.net/mobilplayer.php?radyoadresi=http://sr1.netmedya.org:1086"target="Radyo">Kapadokya Fm</a></li> 
<li><a href="https://radyodinlesem.net/mobilplayer.php?radyoadresi=http://yayin1.canliyayin.org:8286"target="Radyo">Keskin Fm</a></li> 
<li><a href="https://radyodinlesem.net/mobilplayer.php?radyoadresi=http://yayin.netradyom.com:1345"target="Radyo">Park Fm</a></li>
<li><a href="https://radyodinlesem.net/mobilplayer.php?radyoadresi=http://yayin1.yayindakiler.com:3062"target="Radyo">Kırşehir Kent Fm</a></li>

</div>
</li>

<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item2" />
<label for="item2" class="accordion-heading"><i class="fa fa-table fa-fw"></i> Takvim<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">

</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item3" />
<label for="item3" class="accordion-heading"> <i class="fa fa-cloud"></i> Hava Durumu<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">

</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item4" />
<label for="item4" class="accordion-heading"><i class="fa fa-file-o fa-fw"></i> Haberler<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">

</div>
</li>
</ul>
</div>

	Sitede