菜单下拉效果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效果:图片轮播;选项卡;侧面菜单下拉效果;进度条效果;滑动效果;好友列表选中效果;点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

通用:onclick 鼠标单击ondblclick 鼠标双击onmouseover 鼠标放上onmouseout 鼠标离开onmousemove 鼠标移动 表单:onchang 表单的值改变onblur 失去焦点onfocus 获得焦点onselect 选中 2.好友列表选中效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

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

例子:侧面菜单下拉效果

<style type="text/css">*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}.zhu{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; background-color:#03C; color:white;}.zi{ width:200px; dis

三级浮动菜单的实现,现为点击下拉效果,可扩展为mouseover等

现在移动端设备横行,客户要求搞个时下比较流行的通过点击展开三级浮动菜单,效果如下: 首先是例排的做法,把菜单用静态html布局拼出来 <ul id="mcoMenuRoot"> <li id="lv1ItemMenu" class="lv1Item" status="off"> <div class="lv1RichItemContainer">一级菜单一</div

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

uiTableView 下拉效果

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:YES]; if (tableView.tag==20001) { //下拉效果  isPllDown默认为NO if (!isPullDown) { [UIView animateWithDuration:

CSS3--底部菜单上拉效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>底部菜单上拉效果</title>        <style>            *{                margin: 0;            }            .wrap{                width: 12