Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj20.09.2011, 15:38 (UTC)    
Mesaj konusu: Javascrip Menü ekleme yardım

Arkadaşlar kod bu

Kod:
<!--- KAYNAK: http://www.catlak-site55.tr.gg --->
 -----------------------------------------------------------------Tasarım Üstüne-------------------------------------------------------------

                <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.1.min.js"></script>
   <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery.easing.1.3.js"></script>
   <script>
   
   $(document).ready(function () {

      //Set the height of the block
      $('#menu .block').height($('#menu li').height());

      //go to the default selected item
      topval = $('#menu .selected').position()['top'];
      $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});

      $('#menu li').hover(
         
         function() {
            
            //get the top position
            topval = $(this).position()['top'];
            
            //animate the block
            //you can add easing to it
            $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
            
            //add the hover effect to menu item
            $(this).addClass('hover');   
         },
         
         function() {      
            //remove the hover effect
            $(this).removeClass('hover');   
         }
      );
   
   });
   
   </script>
      

-------------------------------------------------------------Tasarım Üstü Bitiş---------------------------------------------------------------------------

----------------------------------------------------Menüyü Göstermek İstediginiz Yer----------------------------------------------------------
<div id="menu">
<ul>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li class="selected"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>

   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
</ul>
<div class="block png"></div>
</div>




--------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş--------------------------------------------------



-----------------------------------------------------------------Css Kodu--------------------------------------------------------------------------------
#menu {
      font-family:verdana;
      font-size:12px;
      position:relative;
      margin:0 auto;
      width:200px;
   }
   
   #menu ul {
      /* remove list style */
      list-style:none;
      padding:0;
      margin:0;   
      
      /* set the layer position */
      position:relative;
      z-index:5;
   }
   
      #menu li {
         /* set the styles */
         background:#ccc url(http://img.webme.com/pic/c/catlak-site55/vbg.gif) no-repeat 0 0;
         padding:5px;
         margin:2px;
         cursor:pointer;
         border:1px solid #ccc;
      }
      
      #menu li.hover {
         /* on hover, change it to this image */
         background-image:url(http://img.webme.com/pic/c/catlak-site55/bg_hover.gif) !important;
      }
      
      #menu li a {
         text-decoration:none;   
         color:#888;
      }
   
   
   #menu .block {
      /* allow javascript to move the block */
      position:absolute;
      top:0;
      
      /* set the left position */
      left:150px;   
      
      /* display above the #menu */
      z-index:10;
      
      /* the image and the size */
      background:transparent url(http://img.webme.com/pic/c/catlak-site55/darrow.png) no-repeat top right;
      width:39px;
      padding:4px;
      cursor:pointer;
   }
   
   /* fast png fix for ie6 */
   * html .png{
      position:relative;
      behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
   }



----------------------------------------------------------------Css Kodu Bitiş-----------------------------------------------------------

Eger Css Tasarım Kullanmıyorsanız Css Kodunu   <style type="text/css">  Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....







Neyi nereye ekliycem birşey anlamadım yardım edenlere teşekkürler Neutral
______________
-Doktor bu ne?
-Webmaster-Photoshop-HTML-CSS Üzerine Kurulu BS Yardım Platformu
Mesaj21.09.2011, 14:52 (UTC)    
Mesaj konusu:

kod kendi içinde 3 bölüme ayrılmış ve belirtilmiş.
Tasarım ayarlarına girip.
1.Bölüm: Tasarımın üstündeki yazı bölümüne
2.Bölüm:Sitende menü bölümü yazan yere
3.Bölüm Css kodu bölümüne kaydedeceksin.
______________
Mesaj21.09.2011, 15:04 (UTC)    
Mesaj konusu:

Arkadaşımız doğru söylemiş.. Bende aşağıda kodları ayırdım bir kez daha.. Ama dikkatli inceleseydiniz bulurdunuz Smile

TASARIMIN ÜSTÜNE

Kod:
<!--- KAYNAK: http://www.catlak-site55.tr.gg --->
                <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.1.min.js"></script>
   <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery.easing.1.3.js"></script>
   <script>
   
   $(document).ready(function () {

      //Set the height of the block
      $('#menu .block').height($('#menu li').height());

      //go to the default selected item
      topval = $('#menu .selected').position()['top'];
      $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});

      $('#menu li').hover(
         
         function() {
             
            //get the top position
            topval = $(this).position()['top'];
             
            //animate the block
            //you can add easing to it
            $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
             
            //add the hover effect to menu item
            $(this).addClass('hover');   
         },
         
         function() {       
            //remove the hover effect
            $(this).removeClass('hover');   
         }
      );
   
   });
   
   </script>



MENÜYÜ GÖSTERMEK İSTEDİĞİN YERE

Kod:
<div id="menu">
<ul>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li class="selected"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>

   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
   <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
</ul>
<div class="block png"></div>
</div>

CSS KODU BÖLÜMÜNE

Kod:
#menu {
      font-family:verdana;
      font-size:12px;
      position:relative;
      margin:0 auto;
      width:200px;
   }
   
   #menu ul {
      /* remove list style */
      list-style:none;
      padding:0;
      margin:0;   
       
      /* set the layer position */
      position:relative;
      z-index:5;
   }
   
      #menu li {
         /* set the styles */
         background:#ccc url(http://img.webme.com/pic/c/catlak-site55/vbg.gif) no-repeat 0 0;
         padding:5px;
         margin:2px;
         cursor:pointer;
         border:1px solid #ccc;
      }
       
      #menu li.hover {
         /* on hover, change it to this image */
         background-image:url(http://img.webme.com/pic/c/catlak-site55/bg_hover.gif) !important;
      }
       
      #menu li a {
         text-decoration:none;   
         color:#888;
      }
   
   
   #menu .block {
      /* allow javascript to move the block */
      position:absolute;
      top:0;
       
      /* set the left position */
      left:150px;   
       
      /* display above the #menu */
      z-index:10;
       
      /* the image and the size */
      background:transparent url(http://img.webme.com/pic/c/catlak-site55/darrow.png) no-repeat top right;
      width:39px;
      padding:4px;
      cursor:pointer;
   }
   
   /* fast png fix for ie6 */
   * html .png{
      position:relative;
      behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
   }


Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin..... [/code]
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu