JQuery teknikleri ile kayan menü

ademdinlaz
12-10-2010, 16:40   |  #1  
OP Taze Üye
Teşekkür Sayısı: 0
13 mesaj
Kayıt Tarihi:Kayıt: Eyl 2009

buyrun demo

[ Tüm kodu seç ] [ Yeni Pencerede Göster ]
body {  margin: 26px;  padding: 0;  background: #fff url(back.png) no-repeat; }   span {  display: none; }   ul {  position: relative;  width: 800px;  background: url(bg_nav.png) no-repeat;  height: 113px;  list-style-type: none;  margin: 0;  padding: 0; }   li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {  background: transparent;  position: absolute;  width: 110px;  height: 32px;  bottom: 0;  text-decoration: none; }   /* adjusted values for IE6 */ * html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }   li#bu1 a { left: 21px; } li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no-repeat; } li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; } li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }   li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }   --> </style> </head> <body> <ul> <li id="bu1"><a href="#"><span>homepage</span></a></li> <li id="bu2"><a href="#"><span>business</span></a></li> <li id="bu3"><a href="#"><span>personal</span></a></li> <li id="bu4"><a href="#"><span>information</span></a></li> </ul> </body>

oft
17-04-2011, 23:55   |  #2  
oft avatarı
Taze Üye
Teşekkür Sayısı: 0
14 mesaj
Kayıt Tarihi:Kayıt: Tem 2009

yaptım olmadı.Bişeler eksik sanırım

ademdinlaz
29-05-2011, 13:34   |  #3  
OP Taze Üye
Teşekkür Sayısı: 0
13 mesaj
Kayıt Tarihi:Kayıt: Eyl 2009

<script src="www.getintothis.com/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="www.getintothis.com/js/jquery.ui-1.7.min.js" type="text/javascript" charset="utf-8"></script>
<script src="www.getintothis.com/js/rb_menu.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="www.getintothis.com/css/rb_menu.css" media="screen,projection" />
</head>
<body>
default behavior:
<div id="menu1" class="menu clearfix">
<div class="toggle">menu &#187;</div>
<div class="items">      
<ul>
<li><a href="">Home</a></li>
<li><a href="">Facts</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Press</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Contacts</a></li>
<li><a href="">Log in</a></li>
</ul>
</div>
</div>
<hr />
triggered using <strong>click</strong>:
<div id="menu2" class="menu clearfix">
<div class="toggle">menu &#187;</div>
<div class="items">      
<ul>
<li><a href="">Home</a></li>
<li><a href="">Facts</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Press</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Contacts</a></li>
<li><a href="">Log in</a></li>
</ul>
</div>
</div>
<hr />
a different slide animtion ('easein'):
<div id="menu3" class="menu clearfix">
<div class="toggle">menu &#187;</div>
<div class="items">      
<ul>
<li><a href="">Home</a></li>
<li><a href="">Facts</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Press</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Contacts</a></li>
<li><a href="">Log in</a></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">  $('#menu1').rb_menu(); $('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false}); $('#menu3').rb_menu({transition: 'swing'}); </script>
</body>
</html>