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


Yükleniyor...
Yükleniyor...