菜单下拉效果demo记录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;

}

html,body{width:100%;height:100%;}
.sub_item{display:none;height:60px;width:900px;float:left;position:absolute;top:30px;left:0px;height:100px;border:1px solid blue;padding:0px 0px 0px 0px;}
#menu_list{width:900px;margin:0 auto;list-style-type:none;position:relative;}
#menu_list .menu_item,#menu_list .menu_item .menu_item_text{float:left;line-height:30px;}
#menu_list .menu_item{margin:0px 2px;border:1px solid red;}
</style>
<script type="text/javascript">
    function showItem(n,hide){
        document.getElementById("sub_item_0"+n).style.display=(hide==true ? "inline" : "none");
    }
</script>
</head>

<body>
<!--zen coding ul[id="menu_list"]>li[ id="menu_item_0$" class="menu_item" onmouseover="showItem($,true);" onmouseout="showItem($,false);"]*8>span[class="menu_item_text"]{menu_0$}+div[id="sub_item_0$" class="sub_item"]{菜单子菜单$}-->
    <ul id="menu_list">
        <li id="menu_item_01" class="menu_item" onmouseover="showItem(1,true);" onmouseout="showItem(1,false);">
            <span class="menu_item_text">menu_01</span>
            <div id="sub_item_01" class="sub_item">菜单子菜单1</div>
        </li>
        <li id="menu_item_02" class="menu_item" onmouseover="showItem(2,true);" onmouseout="showItem(2,false);">
            <span class="menu_item_text">menu_02</span>
            <div id="sub_item_02" class="sub_item">菜单子菜单2</div>
        </li>
        <li id="menu_item_03" class="menu_item" onmouseover="showItem(3,true);" onmouseout="showItem(3,false);">
            <span class="menu_item_text">menu_03</span>
            <div id="sub_item_03" class="sub_item">菜单子菜单3</div>
        </li>
        <li id="menu_item_04" class="menu_item" onmouseover="showItem(4,true);" onmouseout="showItem(4,false);">
            <span class="menu_item_text">menu_04</span>
            <div id="sub_item_04" class="sub_item">菜单子菜单4</div>
        </li>
        <li id="menu_item_05" class="menu_item" onmouseover="showItem(5,true);" onmouseout="showItem(5,false);">
            <span class="menu_item_text">menu_05</span>
            <div id="sub_item_05" class="sub_item">菜单子菜单5</div>
        </li>
        <li id="menu_item_06" class="menu_item" onmouseover="showItem(6,true);" onmouseout="showItem(6,false);">
            <span class="menu_item_text">menu_06</span>
            <div id="sub_item_06" class="sub_item">菜单子菜单6</div>
        </li>
        <li id="menu_item_07" class="menu_item" onmouseover="showItem(7,true);" onmouseout="showItem(7,false);">
            <span class="menu_item_text">menu_07</span>
            <div id="sub_item_07" class="sub_item">菜单子菜单7</div>
        </li>
        <li id="menu_item_08" class="menu_item" onmouseover="showItem(8,true);" onmouseout="showItem(8,false);">
            <span class="menu_item_text">menu_08</span>
            <div id="sub_item_08" class="sub_item">菜单子菜单8</div>
        </li>
    </ul>
</body>
</html>
时间: 11-26

菜单下拉效果demo记录的相关文章

JS实例之左侧菜单下拉效果,实现左侧菜单栏点击打开关闭效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:200px; height:500

jquery 使用下拉效果的实现

解析xml内容 灵活应用 如果用xx是xml串 ,数据类型则为string 如果获取字符串的长度 用xx.length 如果xml有空的可,解析xml分开可以避免为空时报错 如: var retobj = $(xx).find("SinAssocationRes"); 然后 if(retobj) { retobj.each(function(){ var Ad=$(this).attr("Address"); var Po=$(this).attr("Po

很酷的导航条下拉效果

<style type="text/css"><!--.p9{ font-family: "宋体"; font-size: 9pt; }body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}UNKNOWN { TEXT-DECORATION: none}A:visited { TEXT-DECO

Android抽屉(SlidingDrawer --类似android通知栏下拉效果)

Android抽屉(SlidingDrawer)的实现发 - 红黑联盟http://www.2cto.com/kf/201301/182507.html 可动态布局的Android抽屉之基础http://blog.csdn.net/hellogv/article/details/6789698 android抽屉实现http://blog.csdn.net/wangkuifeng0118/article/details/7229200 Android 使用动画效果后的控件位置处理 类似系统通知栏

Bootsrap下拉菜单实现Hover下拉效果

直接将下面代码Copy过去就行: <script type="text/javascript"> $('ul.nav li.dropdown').hover(function () { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function () { $(this).find('.dropdown-menu').stop(true, true).delay(200

ecshop搜索出现相关商品的效果滑动下拉效果

ecshop搜索栏效果如下 所需要的样式我们可以复制到style.css里: /*搜索滑动效果*/ .Menu { position:absolute; top:30px; left:7px; width:150px; height:auto; z-index:1; background:#FFF; border:1px solid #000; display:none; } .Menu2 { position: absolute; left:0; top:0; width:100%; heig

下拉组件 SwipeRefreshLayout

以前下拉刷新好多都是用的Github上一个叫做Android-PullToRefresh项目 现在google在新的android supoort library中新增了一个 SwipeRefreshLayout 类轻松实现下拉效果 Demo地址:https://github.com/mutexkid/swipe-to-refresh-demo

iOS开发——UI篇&amp;下拉弹出列表选择项效果

下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ‘LMDropdownView’:LMDropdownView是把想要的视图赋给它: 源代码地址:https://github.com/JxbSir/YiYuanYunGou 效果如下: 1:在主页面先定义按键跟绑定视图(没写全的都是属性中定义了比如btnRigth,dropdownView等):

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><