Konular

DropDown Menü Uygulaması

Çok küçük kodlarla oluşturulmuş harika bir DHTML menü örneği
www.dijitalders.com<style>
ul#menu {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px 0pt 20px;
padding:0pt;
}
ul#menu li {
background-position:left 50%;
background-repeat:no-repeat;
border:1px solid #FFCC33;
margin-top:-1px;
position:relative;
}
ul#menu ul {
background-color:#FFD966;
display:none;
left:180px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
position:absolute;
top:0pt;
width:200px;
z-index:100;
}
ul#menu li.submenu {
background:transparent url(submenu_arrow.gif) no-repeat scroll right bottom;
padding:5px;
}
ul#menu li.submenu:hover > ul {
display:block;
}
ul#menu a {
color:#666666;
display:block;
padding:5px;
text-decoration:none;
}
ul#menu a:hover, ul#menu li.submenu:hover {
background-color:#FFCC33;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
        window.onload = function ()
        {
            OnloadEvents;
            var li = document.getElementsByTagName('LI'), i;
            for (i = 0; i < li.length; i++)
            {
                var obp = li[i].parentNode;
                if (obp.id == 'menu2' || obp.parentNode.parentNode.id == 'menu2')
                {
                    li[i].onmouseover = function ()
                    {
                        MenuRollover(this,'over');
                    }
                    li[i].onmouseout = function ()
                    {
                        MenuRollover(this,'out');
                    }
                }
            }
        }
       
        function MenuRollover(ob,state)
        {
            var vis;
            switch (state) {
                case 'over':
                    vis = 'block';
                    break;
                case 'out':
                    vis = 'none';
                    break;
                default:
                    break;
            }
            for (var i = 0; i < ob.childNodes.length; i++)
            {
                if (ob.childNodes[i].nodeName == 'UL') ob.childNodes[i].style.display = vis;
            }
        }
    //-->
    </script>
</head>

<body>

<ul id="menu">
    <li><a href="http://www.amanwithapencil.com/">a man with a pencil</a></li>
    <li><a href="http://lab.amanwithapencil.com/">lab home page</a></li>
    <li class="submenu">experiments
        <ul>

            <li class="submenu">browser bugs
                <ul>
                    <li><a href="http://lab.amanwithapencil.com/comment_bug/">conditional comments bug</a></li>
                    <li><a href="http://lab.amanwithapencil.com/ff_menu/">Firefox DHTML bug</a></li>
                </ul>
            </li>
            <li><a href="http://lab.amanwithapencil.com/centre_page/">centre a page</a></li>
            <li class="submenu">cross-browser PNG alpha
                <ul>
                    <li><a href="http://lab.amanwithapencil.com/png24/">introduction</a></li>

                    <li><a href="http://lab.amanwithapencil.com/png24/js.html">JavaScript: image swap</a></li>
                    <li><a href="http://lab.amanwithapencil.com/png24/test.html">JavaScript test page</a></li>
                    <li><a href="http://lab.amanwithapencil.com/png24/php.html">PHP: targeted content</a></li>
                    <li><a href="http://lab.amanwithapencil.com/png24/test.php">PHP test page</a></li>
                    <li><a href="conclusion.html">conclusion</a></li>
                </ul>

            </li>
            <li><a href="http://lab.amanwithapencil.com/ie_png24_opacity/">IE: opacity and image loader filters</a></li>
            <li><a href="http://lab.amanwithapencil.com/dynamic_forms/">dynamic form elements</a></li>
            <li><a href="http://lab.amanwithapencil.com/tabular_structure/">forms without tables</a></li>
            <li><a href="http://lab.amanwithapencil.com/tool_tips/">IE tool tips</a></li>
        </ul>
    </li>
    <li class="submenu">musings
        <ul>
            <li><a href="http://lab.amanwithapencil.com/blink/">blinkin' Firefox</a></li>
        </ul>
    </li>

    <li class="submenu">background
        <ul>
            <li><a href="http://lab.amanwithapencil.com/user_agent/">browser detection</a></li>
            <li><a href="http://lab.amanwithapencil.com/conditional_comments/">conditional comments</a></li>
            <li><a href="http://lab.amanwithapencil.com/trinity/">trinity</a></li>
        </ul>
    </li>
</ul>
Kaynak lab.amanwithapencil.com/ff_menu/
Yorumunuzu Ekleyin

Javascriptle Form Kontrolü

Basit bir forma ait nesnelerin javascript yardımı ile kontrol edilmesi

29,150 Okunma 1 Yorum 13/02/2009 12:31:53

Sayı Tahmin Oyunu

Date() ve Random() kullanılarak yapılmış bir sayı tahmin oyunu

23,199 Okunma Henüz yorum yapılmamış 21/11/2008 09:55:53

Tablo İşlemleri Örneği

HTML derslerinde tablolarla ilgili sayfalarımızda bir çok parametre öğrenmiştik. Ayrıca CSS derslerinde sınır çizgileri, dışkenar ve içkenar boşlukları hakkındaki sayfalarımızda birçok özellik yer alıyordu. Bu parametreleri ve stil özelliklerini id ile isimlendirilmiş tüm tablolar üzerinde JavaScript kodlarıyla uygulayabiliyoruz

20,069 Okunma Henüz yorum yapılmamış 21/10/2007 03:44:23

Tab Menu Uygulamaları

Basit javascript kodlarıyla yapılabilen bir tab menü uygulaması

17,904 Okunma Henüz yorum yapılmamış 19/07/2007 20:10:26

Fonksiyonlar

16,002 Okunma Henüz yorum yapılmamış 17/07/2007 18:43:18

IF Kulanımı

if birçok uygulamanın merkezinde kullanılan bir komuttur.

13,697 Okunma Henüz yorum yapılmamış 08/01/2014 21:16:41 10/01/2014 16:26:56

Yükleniyor...