Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj20.07.2009, 18:09 (UTC)    
Mesaj konusu: Şunun bana nasıl yapılacağını açıklarmısınız acaba?

http://javascript-array.com/scripts/simple_drop_down_menu/

Şu sitedeki drop menüyü uygulamak istiyorum başlık resmimin altına.acaba nasıl yaparım?şu sitede 3 tane kodlama var.Css kodları,html kodları,javascript kodları.Bunların nasıl derleneceğini bilmiyorum.Lütfen yardım edermisiniz?

Html kodu
Kod:
<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Kod:


CSS kodu
#sddm
{   margin: 0;
   padding: 0;
   z-index: 30}

#sddm li
{   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   font: bold 11px arial}

#sddm li a
{   display: block;
   margin: 0 1px 0 0;
   padding: 4px 10px;
   width: 60px;
   background: #5970B2;
   color: #FFF;
   text-align: center;
   text-decoration: none}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background: #EAEBD8;
   border: 1px solid #5970B2}

   #sddm div a
   {   position: relative;
      display: block;
      margin: 0;
      padding: 5px 10px;
      width: auto;
      white-space: nowrap;
      text-align: left;
      text-decoration: none;
      background: #EAEBD8;
      color: #2875DE;
      font: 11px arial}

   #sddm div a:hover
   {   background: #49A3FF;
      color: #FFF}


Javascript kodu
Kod:
var timeout   = 500;
var closetimer   = 0;
var ddmenuitem   = 0;

// open hidden layer
function mopen(id)
{   
   // cancel close timer
   mcancelclosetime();

   // close old layer
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

   // get new layer and show it
   ddmenuitem = document.getElementById(id);
   ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
   closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
   if(closetimer)
   {
      window.clearTimeout(closetimer);
      closetimer = null;
   }
}

// close layer when click-out
document.onclick = mclose;


lütfen bunları nasıl yapacağımı açıklayın!?[/u][/i]
Mesaj20.07.2009, 18:13 (UTC)    
Mesaj konusu:

Kodları Derlerim Sen Sitene Eklersin.

Başlık Menüsü Kodu:
Kod:
<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

var timeout   = 500;
var closetimer   = 0;
var ddmenuitem   = 0;

// open hidden layer
function mopen(id)
{   
   // cancel close timer
   mcancelclosetime();

   // close old layer
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

   // get new layer and show it
   ddmenuitem = document.getElementById(id);
   ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
   closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
   if(closetimer)
   {
      window.clearTimeout(closetimer);
      closetimer = null;
   }
}

// close layer when click-out
document.onclick = mclose;


Css Kodu Bölümüne:
Kod:
CSS kodu
#sddm
{   margin: 0;
   padding: 0;
   z-index: 30}

#sddm li
{   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   font: bold 11px arial}

#sddm li a
{   display: block;
   margin: 0 1px 0 0;
   padding: 4px 10px;
   width: 60px;
   background: #5970B2;
   color: #FFF;
   text-align: center;
   text-decoration: none}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background: #EAEBD8;
   border: 1px solid #5970B2}

   #sddm div a
   {   position: relative;
      display: block;
      margin: 0;
      padding: 5px 10px;
      width: auto;
      white-space: nowrap;
      text-align: left;
      text-decoration: none;
      background: #EAEBD8;
      color: #2875DE;
      font: 11px arial}

   #sddm div a:hover
   {   background: #49A3FF;
      color: #FFF}


Kod:
İyi Günler...
Mesaj20.07.2009, 20:29 (UTC)    
Mesaj konusu:

derleme için sağol.fakat ben css tasarım kullanmıyorum ice blue kullanıyorum.ayrıca o kadları ekleyeceğim başlık menüsü ve css kodu bölümleri yok ne yapacağım?
Mesaj21.07.2009, 09:45 (UTC)    
Mesaj konusu:

ıceblue kullanıyosan tasarım ayarların dan css yi sececen
______________
Önceki mesajları göster:   


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