二级菜单制作成果

<style type="text/css">
*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:20px; border-radius:8px;}
#kuang{ width:200px; height:300px;}
.list{ width:200px; height:60px; text-align:center; vertical-align:middle; font-weight:bold;}
.list:hover{ background-color:#F03; color:#FFF;}

</style>
</head>

<body>
<div id="kuang" style=" width:200px; height:400px; background-color:#F03;">
<br/>
<div id="wai"></div>
<div class="list">首页</div>

<div class="list"  onclick="xiao()">服务中心</div>

<div id="xiao" style="display:none" onclick="xiao()">

       <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品介绍</div>
       <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">合作洽谈</div>
       <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">联系电话</div></div>

<div class="list" onclick="x1()">会员中心</div>
      <div id="x1" style="display:none" onclick="x1()">
      <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">会员注册</div>
       <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">密码找回</div>
       <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">客服电话</div></div>

<div class="list" onclick="x2()">售后中心</div>
        <div id="x2"  style="display:none" onclick="x2()">
        <div class="x2" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品退换</div>
       <div class="x2" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">意见反馈</div>
       <div class="x2"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">售后电话</div></div>

<div class="list" onclick="x3()">联系客服</div>
       <div id="x3"   style="display:none" onclick="x3()">
       <div class="x3" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">客户咨询</div>
       <div class="x3" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">信息投诉</div>
       <div class="x3"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">投诉电话</div></div>

<div class="list" onclick="x4()">在线咨询</div>
       <div id="x4" style="display:none" onclick="x4()">
       <div class="x4" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">人工咨询</div>
       <div class="x4" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">短讯回复</div>
       <div class="x4"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">咨询电话</div></div>

</div>
</body>
</html>
<script>
function xiao()
{
    var xiao1=document.getElementById("xiao");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }

    }
function x1()
{
    var xiao1=document.getElementById("x1");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }

    }
function x2()
{
    var xiao1=document.getElementById("x2");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }

    }
function x3()
{
    var xiao1=document.getElementById("x3");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }

    }
function x4()
{
    var xiao1=document.getElementById("x4");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }

    }

</script>
时间： 2024-11-07 04:57:03

二级菜单制作成果的相关文章

html+css二级菜单制作！

二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .er{ width: auto; background-color: antiquewhite; } a{ text-decoration: none; } .er

二级菜单制作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ti

制作动画二级菜单

下面是学习慕课网上的制作动作二级菜单的HTML代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4

JS 学习制作一个二级菜单

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>菜单栏</title> 5 <script src="jquery/jquery-2.1.1.js"></script> 6 <script> 7 $(document).ready(function () {

CSS制作二级菜单时，二级菜单与一级菜单不对齐

效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul> <li class="top"><a href="#" target="_blank">关于我们</a></li> <li><a href="#" targ

动态生成二级菜单

现在越来越多的用到二级甚至多级菜单,前台菜单的显示,手动指定也越来越不能满足要求,所以,动态生成菜单是必须的 思路 + 示例代码(以二级菜单为例) 先取出一级菜单内容值,接下来遍历一级菜单,将其id当做本次检索的parentid,将与之对应的二级菜单值获取到, 并加入到当前数组中(后台) 二层循环,当获取一个值时,检查其对于的二级菜单项是否有数据,有的话,则输出来,没有则跳过(前台) 以PHP后台为例 $res = mysql_query('*** where parentid = 0');  

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

html: <div class="col-sm-3 col-md-2 sidebar"> <div class="totalt"><a>系统管理系统</a></div> <ul class="menu"> <li class="title"> <a class="item item1"><span cla

三级菜单制作

HTML代码: <body> <div class="navMenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函数</a>

导航条菜单制作总结

整理自慕课网 http://www.imooc.com/view/6 制作垂直导航条时若不想增加导航块的长度可用text-indent:20px;进行缩进 导航条菜单制作总结1.用无序列表构建菜单:ul/li2.垂直菜单转变为水平菜单:float:left:3.在制作圆角菜单时,背景图片贴在<a>标签上: -------> 雪碧图的应用--- background-position4.在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧: ----> margin-top用负值:5.