Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz.
Menü aşağıdaki biçimde açılıyor
Örnek Uygulama
HTML kodlarımız
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gumusluoglu.Com</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="xbreadcrumbs.js"></script>
<link rel="stylesheet" href="xbreadcrumbs.css" />
<script type="text/javascript">
$(document).ready(function(){
// Initialize xBreadcrumbs
$('#breadcrumbs-1').xBreadcrumbs();
$('#breadcrumbs-2').xBreadcrumbs({ collapsible: true });
$('#breadcrumbs-3').xBreadcrumbs();
});
</script>
<style type="text/css">
.xbreadcrumbs LI {
border-right: none;
background: url(images/separator.gif) no-repeat right center;
padding-right: 15px;
padding-left: 10px;
}
.xbreadcrumbs LI.current { background: none; }
.xbreadcrumbs LI UL LI { background: none; }
.xbreadcrumbs LI A.home {
background: url(images/home.gif) no-repeat left center;
padding-left: 20px;
}
/* Custom styles for breadcrums (#breadcrumbs-3) */
.xbreadcrumbs#breadcrumbs-3 {
background: none;
}
.xbreadcrumbs#breadcrumbs-3 LI A {
text-decoration: underline;
color: #0A8ECC;
}
.xbreadcrumbs#breadcrumbs-3 LI A:HOVER, .xbreadcrumbs#breadcrumbs-3 LI.hover A { text-decoration: none; }
.xbreadcrumbs#breadcrumbs-3 LI.current A {
color: #333333;
text-decoration: none;
}
.xbreadcrumbs#breadcrumbs-3 LI {
border-right: none;
background: url(images/separator-arrow.gif) no-repeat right center;
padding-right: 15px;
padding-left: 10px;
}
.xbreadcrumbs#breadcrumbs-3 LI.current { background: none; }
.xbreadcrumbs#breadcrumbs-3 LI UL LI { background: none; padding: 0; }
/* Demo styles */
BODY {
margin: 20px;
padding: 20px;
}
STRONG { color: #000000; }
.vspacer {
height: 20px;
}
PRE.code {
padding: 7px;
background: #777777;
color: #F0F0F0;
width: 400px;
overflow: auto;
}
</style>
</head>
<body>
<div id="page">
<!-- Example 2 -->
<ul class="xbreadcrumbs" id="breadcrumbs-2">
<li>
<a href="#" class="home">Ana Sayfa</a>
<ul>
<li><a href="http://www.gumusluoglu.com/kategoriler/ajax-ile-jquery-kullanici-mesaj-formu/" target="_blank">AJAX ile jQuery Kullanıcıa></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/htaccess-subdomaini-dizine-yonlendirmek/" target="_blank">.htaccess-subdomain’i </a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/jquery-form-validator/" target="_blank">Jquery Form Validator</a></li>
<li><a href="#" target="_blank">Advertise With Us</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/slider-login-twitter-tarzi-login/" target="_blank">Slider Login (Twitter Tarzı Login)</a></li>
</ul>
</li>
<li>
<a href="#">PHP</a>
<ul>
<li><a href="http://www.gumusluoglu.com/kategoriler/php-ile-random-sayi-uretme/" target="_blank">Php ile Random Sayı Üretme</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/jquery-tab-uygulamasi/" target="_blank">Jquery Tab Uygulaması</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/pop-up-sayfa/" target="_blank">Pop-up Sayfa</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/phpde-xml-olusturma/" target="_blank">Php’de XML Oluşturma</a></li>
</ul>
</li>
<li>
<a href="#">MYSQL</a>
<ul>
<li><a href="http://www.gumusluoglu.com/kategoriler/mysql-lower-ve-upper-komutu/" target="_blank">Mysql Lower ve Upper Komutu</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/mysql-andve-ve-orveya-komutu/" target="_blank">Mysql AND(ve) ve OR(veya) Komutu</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/mysqlde-distict-komutu/" target="_blank">Mysql’de Distinct Komutu</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/mysql-truncate-tablu-icerisini-bosaltma-komutu/" target="_blank">Mysql Truncate (Tablu içerisini boşaltma) Komutu</a></li>
<li><a href="http://www.gumusluoglu.com/kategoriler/mysql-join/" target="_blank">Mysql Join</a></li>
</ul>
</li>
<li>
<a href="#">Dost Siteler</a>
<ul>
<li><a href="http://www.serpito.com/">Serpitp</a></li>
<li><a href="http://www.dilmen.net/">Aykut Dilmen</a></li>
</ul>
</li>
<li class="current"><a href="#">Gumusluoglu.Com Site İçeriği</a></li>
</ul>
</div>
</body>
</html>
Javascript kodalarımız
/*
xBreadcrumbs (Extended Breadcrums) jQuery Plugin
© 2009 ajaxBlender.com
For any questions please visit www.ajaxblender.com
or email us at support@ajaxblender.com
*/
;(function($){
/* Variables */
$.fn.xBreadcrumbs = function(settings){
var element = $(this);
var
settings = $.extend({}, $.fn.xBreadcrumbs.defaults, settings);
function _build(){
if(settings.collapsible){
var sz = element.children('LI').length;
element.children('LI').children('A').css('white-space', 'nowrap').css('float', 'left');
element.children('LI').children('A').each(function(i, el){
if(i != sz - 1){
$(this).css('overflow', 'hidden');
$(this).attr('init-width', $(this).width());
$(this).width(settings.collapsedWidth);
}
});
}
element.children('LI').mouseenter(function(){
if($(this).hasClass('hover')){ return; }
_hideAllSubLevels();
if(!_subLevelExists($(this))){ return; }
// Show sub-level
var subLevel = $(this).children('UL');
_showHideSubLevel(subLevel, true);
if(settings.collapsible && !$(this).hasClass('current')){
var initWidth = $(this).children('A').attr('init-width');
$(this).children('A').animate({width: initWidth}, 'normal');
}
});
element.children('LI').mouseleave(function(){
var subLevel = $(this).children('UL');
_showHideSubLevel(subLevel, false);
if(settings.collapsible && !$(this).hasClass('current')){
$(this).children('A').animate({width: settings.collapsedWidth}, 'fast');
}
});
};
function _hideAllSubLevels(){
element.children('LI').children('UL').each(function(){
$(this).hide();
$(this).parent().removeClass('hover');
});
};
function _showHideSubLevel(subLevel, isShow){
if(isShow){
subLevel.parent().addClass('hover');
if($.browser.msie){
var pos = subLevel.parent().position();
subLevel.css('left', parseInt(pos['left']));
}
if(settings.showSpeed != ''){ subLevel.fadeIn( settings.showSpeed ); }
else { subLevel.show(); }
} else {
subLevel.parent().removeClass('hover');
if(settings.hideSpeed != ''){ subLevel.fadeOut( settings.hideSpeed ); }
else { subLevel.hide(); }
}
};
function _subLevelExists(obj){
return obj.children('UL').length > 0;
};
// Entry point
_build();
};
/* Default Settings */
$.fn.xBreadcrumbs.defaults = {
showSpeed: 'fast',
hideSpeed: '',
collapsible: false,
collapsedWidth: 10
};
})(jQuery);
4 Comments
Temaya Neler Eklenecek Biraz Konuyu Açar mısınız ?
Örneğimizde sadece Ana Sayfa menüsünde image bulunmakta,diğer menülerede image verebiliriz,menülerimizi birbirindne ayıran > şeklindeki imaga yerine bağla bir imaga kullanabiliriz veya css kodlarımızla oynayarak font size’ları, font color’ları değiştirebiliriz, linklerimize hover verebiliriz.
Örnek Haricinde, Şu Şu Kodlar Temada CSS Kısmına, Şu Kodlar Arasında da Linkleriniz Diye Belirtmeniz Kullanıcılara Kolaylık Olur. Kodlardan Çok Fazla Anlamıyorum Anlasam da Ben vBulletin Sisteminde Kullanacağım İçin Karışık Oluyor
kodlar için teşekkürler…