jQuery ve Css3 kullanılarak hazırlanmış bir slayt akordiyon menü örneği. Mouse akordiyon listesinin üzerine geldiğinde websayfa içeriğinin rengi biraz matlaşıyor. Bu şekilde akordiyon menü örneği websayfasında daha önplanda görünüyor. Normalde akordiyon menü örnekleri sağa, sola yada her iki tarafa birden açılır. Bu akordiyon menü örneğimizde ise mouse ile linklerin üzerine geldiğinizde sağa doğru menü genişleyip açılırken sol tarafta bulunan menü resmi de sol tarafa doğru kayıp kayboluyor ve siyah beyaz menü resminin yerine renkli bir resim geliyor. jQuery animasyonlar kullanılan akordiyon menü örneğini özelleştirip farklı şekillerde kullanabilirsiniz. Daha ince yapıp bir üst menü olarak, resim ekleyip slayt galeri olarak yada tam sayfa büyük bir şekilde portföy olarak bile kullanabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
JavaScript :
<script type="text/javascript">
$(document).ready(function(){
//BUILD IN
$('#container h1').css("opacity", "0");
$('#primary_content').css("opacity", "0");
$('#centerwell').css("width", "0");
var sch = $('#secondary_content').height();
$('#secondary_content').css("height", "0");
$('#secondary_content').css("opacity", "0");
$('#container h1').animate({
'opacity': '0.01'
}, 500, function() {
$('#centerwell').animate({
width: '100%'
}, 700, function() {
$('#primary_content').animate({
'opacity': '1'
}, 300, function() {
$('#secondary_content').animate({
'height': sch,
'opacity': '1'
}, 300, function() {
$('#container h1').stop().animate({
opacity: "1"
});
})
})
})
})
// EVENTS
$('#centerwell li').click(function() {
window.open($(this).find('a').attr('href'));
});
$('#centerwell li').hover(function() {
$('#content, h1').stop().animate({opacity: ".2"});
$('.morph').stop().animate({'color': '#9EAEBE'}, 400);
$('.morph_alt').stop().animate({'color': '#9EAEBE'}, 400);
$(this).stop().animate({
width: "318px"
}, 300, function() {
})
$(this).find('h3').stop().animate({
backgroundPosition: "-72px"
}, 300, function() {
})
}, function() {
$('.morph').stop().animate({'color': '#00aaf0'}, 400);
$('.morph_alt').stop().animate({'color': '#00aaf0'}, 400);
$('#content, h1').stop().animate({opacity: "1"});
$(this).stop().animate({
width: "72px"
}, 300, function() {
})
$(this).find('h3').stop().animate({
backgroundPosition: "0px"
}, 300, function() {
})
})
});
</script>
Css reset :
/* v1.0 reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Css :
body {
background: #1f2327 url(img/footer.png) repeat-x bottom left;
min-width: 1036px;
font-family: "Helvetica Neue", Arial, sans-serif;
}
#container h1 {
display: block;
width: 210px; height: 104px;
margin-left: 130px;
background: url(img/logo.png);
text-indent: -9999px;
}
#centerwell {
position: relative;
height: 177px;
background: #3d464e;
overflow: hidden;
}
#centerwell li {
position: relative;
width: 72px; height: 177px;
float: left;
border-right: #3d464e 1px solid;
background: white;
overflow: hidden;
cursor: pointer;
}
#centerwell h3 {
position: absolute;
top: 0; left: 0;
text-indent: -9999px;
width: 72px; height: 177px;
}
#centerwell p {
width: 215px;
margin-left: 85px;
margin-top: 50px;
padding-top: 40px;
color: #5f5f5f;
font-size: 15px;
line-height: 18px;
font-family: GeogrotesqueMedium, Helvetica, Arial, sans-serif;
letter-spacing: 0pt;}
/* ADDING IMAGES PER SECTIONS FOR GLOBAL NAV*/
#behance h3 {
background: url(img/behance_btn.gif) no-repeat white;
}
#behance p {
background: url(img/behance_over_bg.gif) no-repeat;
}
#flicker h3 {
background: url(img/flickr_btn.gif) no-repeat;
}
#flicker p {
background: url(img/flickr_over_bg.gif) no-repeat;
}
#linkedin h3 {
background: url(img/linkedin_btn.gif) no-repeat;
}
#linkedin p {
background: url(img/linkedin_over_bg.gif) no-repeat;
}
#facebook h3 {
background: url(img/facebook_btn.gif) no-repeat;
}
#facebook p {
background: url(img/facebook_over_bg.gif) no-repeat;
}
#twitter h3 {
background: url(img/twitter_btn.gif) no-repeat;
}
#twitter p {
background: url(img/twitter_over_bg.gif) no-repeat;
}
#resume h3 {
background: url(img/resume_btn.gif) no-repeat;
}
#resume p {
background: url(img/resume_over_bg.gif) no-repeat;
}
#email h3 {
background: url(img/email_btn.gif) no-repeat;
}
#email p {
background: url(img/email_over_bg.gif) no-repeat;
}
#contact h3 {
background: url(img/contact_btn.gif) no-repeat;
}
#contact p {
background: url(img/contact_over_bg.gif) no-repeat;
}
/* END */
#behance {
margin-left: 206px;
}
#content {
position: relative;
width: 790px;
padding-bottom: 135px;
}
#primary_content {
padding-left: 205px;
padding-top: 30px;
padding-right: 40px;
width: 325px;
}
#primary_content p,
#primary_content span,
#primary_content em {
color: #657381;
font-size: 12px;
line-height: 16px;
letter-spacing: 1px;
}
#primary_content h2 {
line-height: 33px;
text-decoration: none;
font-size: 35px;
margin-bottom: 5px;
font-family: GeogrotesqueLight, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
}
#primary_content span.title.current {
display: block;
font-size: 15px;
margin-bottom: 60px;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
}
#primary_content h2 a,
#primary_content h1,
#primary_content h2,
#primary_content h3 {
color: #00aaf0;
}
#primary_content h3 {
margin-top: 38px;
margin-left: -213px;
padding-left: 3px;
border-left: #262b30 210px solid;
font-size: 18px;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 12px;
}
#primary_content h5,
#primary_content span.location {
display: block;
color: #9eaebe;
font-family: GeogrotesqueMedium, Helvetica, Arial, sans-serif;
font-size: 13px;
letter-spacing: 1px;
}
#positions li {
position: relative;
margin-bottom: 20px;
}
#positions li em {
display: block;
margin-bottom: 4px;
}
#positions li span.date {
position: absolute;
color: #373e46;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
top: -1px;
left: -90px;
width: 85px;
}
#secondary_content {
position: absolute;
top: 0;
right: 0;
width: 190px;
background: #262b30;
padding-top: 144px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 40px;
color: #9eaebe;
font-size: 11px;
overflow: hidden;
}
#secondary_content h5 {
color: #00aaf0;
font-size: 18px;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
letter-spacing: 1px;
}
#secondary_content ul li h6 {
color: #9eaebe;
font-size: 13px;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
line-height: 23px;
}
#secondary_content ul li p {
color: #657381;
line-height: 15px;
margin-bottom: 15px;
}
#client_list {
font-size: 18px;
letter-spacing: 1px;
font-family: GeogrotesqueReg, Helvetica, Arial, sans-serif;
margin-bottom: 12px;
margin-top: 40px;
color: #00aaf0;
}
#client_names {
float: left;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
color: #657381;
line-height: 16px;
margin-bottom: 10px;
}
#client_names li {
float: left;
width: 10em;
margin: 0;
padding: 0;
}
#thecssawards{
position:absolute;
top:20px;
right:0px;
z-index:555;
}
#thecssawards a{
width:69px;
height:105px;
text-indent:-8000px;
display:block;
background: url(award_day_black.png) no-repeat;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="container"> <h1>mintik.com</h1> <ul id="centerwell"> <li id="behance"> <h3><a href="#" target="_blank">Behance</a></h3> <p>Take a look at my portfolio, let me know whatcha think. </p> </li> <li id="flicker"> <h3><a href="#" target="_blank">Flicker</a></h3> <p>See what I've been up to with my camera.</p> </li> <li id="linkedin"> <h3><a href="#" target="_blank">LinkedIn</a></h3> <p>Hit me up, I'm always looking to make new connections.</p> </li> <li id="facebook"> <h3><a href="#" target="_blank">Facebook</a></h3> <p>I have to admit I check it at least once a day.</p> </li> <li id="twitter"> <h3><a href="#" target="_blank">Twitter</a></h3> <p>I'm more of a voyeur here, but when I do say something ...</p> </li> <li id="resume"> <h3><a href="#" target="_blank">Resume</a></h3> <p>Download in PDF format. References given upon request.</p> </li> <li id="email"> <h3><a href="#">Email</a></h3> <p>mail@site.com</p> </li> <li id="contact"> <h3><a href="#" target="_blank">Contact</a></h3> <p>Phone: +44 444 444 44 44<br> Location: World</p> </li> </ul><!-- centerwell --> <div id="content"> </div> </div><!-- container --> </div><!-- main -->