CSS之简单树形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>制作简单的树形菜单</title>

<style type="text/css">

body{font-size:13px;

     line-height:20px;

     }

a{font-size: 13px;

  color: #000000;

  text-decoration: none;

  }

a:hover{font-size:13px;

       color: #ff0000;

       }

img {

    vertical-align: middle;

    border:0;

    list-style-type: none;

}

.no_circle{list-style-type:none;

 /*设置列表项标志的类型为无*/

   display:none;

    }

</style>

<script  type="text/javascript">

function show(){

if(document.getElementById("art").style.display=='block'){

    document.getElementById("art").style.display='none';

     //触动的ul如果处于显示状态，即隐藏

 }

else{

    document.getElementById("art").style.display='block';

     //触动的ul如果处于隐藏状态，即显示

   }

}

function show2(){

if(document.getElementById("tietu").style.display=='block'){

    document.getElementById("tietu").style.display='none';

     //触动的ul如果处于显示状态，即隐藏

 }

else{

    document.getElementById("tietu").style.display='block';

     //触动的ul如果处于隐藏状态，即显示

   }

}

function show3(){

if(document.getElementById("fangchan").style.display=='block'){

    document.getElementById("fangchan").style.display='none';

    //触动的ul如果处于显示状态，即隐藏

 }

else{

    document.getElementById("fangchan").style.display='block';

     //触动的ul如果处于隐藏状态，即显示

   }

}

function show4(){

if(document.getElementById("yule").style.display=='block'){

    document.getElementById("yule").style.display='none';

     //触动的ul如果处于显示状态，即隐藏

 }

else{

    document.getElementById("yule").style.display='block';

     //触动的ul如果处于隐藏状态，即显示

   }

}

</script>

</head>

<body>

<b><img src="All.gif"><font color="#009900">树形菜单：</font></b>

<a href="javascript:onclick=show() "><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">文学艺术</a>

        <ul id="art" class="no_circle">

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">先锋写作</li>

           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif" >小说散文</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif" >诗风词韵</li>

         </ul>

<a href="javascript:onclick=show2() ">

          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">贴图专区</a>

        <ul id="tietu" class="no_circle">

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">真我风采</li>

           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">视屏贴图</li>

           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">行行摄摄</li>

           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">Flash贴图</li>

         </ul>

    <a href="javascript:onclick=show3() ">

          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">房产论坛</a>

        <ul id="fangchan" class="no_circle">

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">我要买房</li>

           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">楼市话题</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">我要卖房</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">租房心语</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">二手市场</li>

         </ul> 

          <a href="javascript:onclick=show4() ">

          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">娱乐八卦</a>

        <ul id="yule" class="no_circle">

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">红楼一梦</li>

           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">楼市话题</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">笑话论坛</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">休闲生活</li>

            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">大话春秋</li>

         </ul>     

</body>

</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作简单的树形菜单</title>
<style type="text/css">
body{font-size:13px;
line-height:20px;
}
a{font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
list-style-type: none;
}
.no_circle{list-style-type:none;
/*设置列表项标志的类型为无*/
display:none;
}
</style>
<script type="text/javascript">
function show(){
if(document.getElementById("art").style.display=='block'){
document.getElementById("art").style.display='none';
//触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("art").style.display='block';
//触动的ul如果处于隐藏状态，即显示
}
}

function show2(){
if(document.getElementById("tietu").style.display=='block'){
document.getElementById("tietu").style.display='none';
//触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("tietu").style.display='block';
//触动的ul如果处于隐藏状态，即显示
}
}

function show3(){
if(document.getElementById("fangchan").style.display=='block'){
document.getElementById("fangchan").style.display='none';
//触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("fangchan").style.display='block';
//触动的ul如果处于隐藏状态，即显示
}
}

function show4(){
if(document.getElementById("yule").style.display=='block'){
document.getElementById("yule").style.display='none';
//触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("yule").style.display='block';
//触动的ul如果处于隐藏状态，即显示
}
}

</script>
</head>

<a href="javascript:onclick=show2() ">
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">贴图专区</a>
<ul id="tietu" class="no_circle">
<li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">真我风采</li>
<li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">视屏贴图</li>
<li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">行行摄摄</li>
<li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">Flash贴图</li>
</ul>

</body>

CSS之简单树形菜单的更多相关文章

一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
HTML+CSS实现简单三级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
java--css+js做的树形菜单(完整版)
jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
简单实用的二级树形菜单hovertree
原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用查看绿色效果:http:/ ...
构建简单的json树形菜单
json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...
jQuery 树形菜单
树形菜单在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
实用的树形菜单控件tree
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview jQuery jstree jsTree ...
html树形菜单控件
html树形菜单控件链接 http://www.ithao123.cn/content-713974.html jQuery plugin: Treeview 这个插件能够把无序 ...

随机推荐

Pgpool烂泥扶不上墙
写这篇文章,是想好心地给打算使用Pgpool的人提个醒: Pgpool 真的不适合在企业范围使用. 我的主要理由是: 设计陈旧: 一旦后台任何节点Down掉,都会引发failover,它会杀掉所有子进 ...
Codeforces Round #146 (Div. 1) A. LCM Challenge 水题
A. LCM Challenge 题目连接: http://www.codeforces.com/contest/235/problem/A Description Some days ago, I ...
SGU 531. Bonnie and Clyde 线段树
531. Bonnie and Clyde 题目连接: http://acm.sgu.ru/problem.php?contest=0&problem=531 Description Bonn ...
将表中数据生成SQL语句
在开发过程中,经常需要我们对表中的数据进行转移,如果在同台机器,可以使用SQL自带的导入数据,但是如果想让所有的数据生成可执行的SQL语句,它的移植性最强了.首先要设计一个存储过程.具体如下: CRE ...
Javascript 异步加载详解
Javascript 异步加载详解本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
商户怎样选择商业wifi进行移动营销
互联网移动营销的大潮席卷而来,带给很多其它的商户营销理念上的升级和更新.商业wifi营销成为很多其它的商户选择.以往,人们在咖啡店不过聊聊天喝喝咖啡,如今,人们能够更悠闲的歇息娱乐享受带有wifi的咖 ...
SQLServer恢复表级数据
最近几天,公司的技术维护人员频繁让我恢复数据库,因为他们总是少了where条件,导致update.delete出现了无法恢复的后果,加上那些库都是几十G.恢复起来少说也要十几分钟.为此,找了一些资料和 ...
oracle建索引的可选项
oracle中建索引可能大家都会,但是建索引是有几个选项参数却很少有人关注,在某些特殊环境下,可能会非常有用,下面一一说明: 1.NOSORT,记录排序可选项. 默认情况下,在表中创建索引的时候,会对 ...
实例源码--IOS高仿微信打飞机游戏(完整功能)
下载源码技术要点: 1. IOS游戏开发基础框架 2. 高仿打飞机游戏 3. 游戏背景音频技术 4.源码详细的中文注释 ……. 详细介绍: 1. IOS游戏开发基础框架此套源码为涉及IOS游戏开发 ...
memcached缓存批量更新解决方案探讨
众所周知,Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. 俺所在的公司经营的主要是基于web和wap两个平台的手机游戏门户网站,分布式缓存解决方法正好有 ...

CSS之简单树形菜单

CSS之简单树形菜单的更多相关文章

随机推荐

热门专题