Yine sıkıntıdan yaptığım basit bi' tasarım ile karşınızdayım 
Açılıp kapanabilen bi' duyuru paneli yaptım.
Tıklayıp gidin.
Yukardaki siteye aşağıda verdiğim kodları yapıştırıp önizle dediğinizde nasıl olduğunu göreceksiniz
Açılıp kapanabilen bi' duyuru paneli yaptım. Tıklayıp gidin.
Yukardaki siteye aşağıda verdiğim kodları yapıştırıp önizle dediğinizde nasıl olduğunu göreceksiniz
Kod:
<html>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
var a = 0;
$('div.duyuruAc').click(function(){
if( a == 0 ){
$('div.duyuruAc').text('Duyuruları Kapat');
a++;
}else{
$('Div.duyuruAc').text('Duyuruları Göster');
a = 0;
}
$('div.duyuru').slideToggle({
easing: 'easeOutBounce',
duration: 650
});
});
});
</script>
<body>
<div class="duyuruAc">Duyuruları Göster</div>
<div class="duyuru">
<i class="fa fa-minus-square"></i> <a href="#" onclick="return false">Bu birinci duyurudur...</a><br />
<i class="fa fa-minus-square"></i> <a href="#" onclick="return false">Bu ikinci duyurudur...</a><br />
<i class="fa fa-minus-square"></i> <a href="#" onclick="return false">Bu üçüncü duyurudur...</a><br />
<i class="fa fa-minus-square"></i> <a href="#" onclick="return false">Bu dördüncü duyurudur...</a><br />
</div>
</script>
<style>
body {
background: #67809F;
margin: 35px;
}
div.duyuru {
padding: 7px;
background: #3498DB;
box-shadow: 0px 5px 0px #446CB3;
display: none;
width: 585px!important;
color: #fff;
}
div.duyuru a {
text-shadow: 1px 1px 1px black;
color: #fff;
font-weight: bold;
font-family: Trebuchet MS;
text-decoration: none;
}
div.duyuruAc {
background: #446CB3;
padding: 7px;
font-weight: bold;
font-family: Trebuchet MS;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px black;
width: 585px;
cursor: pointer;
}
</style>
1
