制作横向菜单

所谓横向菜单就是有三个标题栏，当鼠标移到那个标题就显示下级菜单，其他隐藏。

<!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=utf-8" />
<title>横向菜单</title>
<style type="text/css">
       td {font-size: 13px;
           color: #000000;
           line-height: 22px;} 

       div{
            /*设置层背景样式*/
            background-color:#669933;
            text-align:center;

            display:none; 

    } 

       a {font-size: 16px;
           color: #FFFFFF;
           text-decoration: none;
          /*文字链接的背影样式*/
           background-color:#669933;
           width:100px;
           line-height:22px;
           text-align:center;

}
        a:hover {font-size: 13px;
                 color: #ffffff;
          /*鼠标在文字链接上时的文字背景样式*/
              background-color:#FE9D01;
              width:200px;
              line-height:22px;
              text-align:center;
}
</style> 

<script language="JavaScript">
function show(d1){    document.getElementById(d1).style.display=‘block‘; //显示层 

}    

function hide(d1){
    document.getElementById(d1).style.display=‘none‘; 

    }  

    </script> 

    </head> 

    <body> 

    <table width="220" style="border:1px solid red;background:#fff" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td><a  onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</a></td>
      <td><a onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</a></td>
      <td><a  onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</a></td>
    </tr> 

<tr>
      <td>
        <div id="1" >
             手机数码1<br/>
             手机数码2<br/>
             手机数码3
       </div>
    </td> 

   <td>
     <div id="2" >
            淘宝集市1<br/>
            淘宝集市2<br/>
            淘宝集市3
      </div>
   </td> 

   <td>
     <div id="3">
          品牌商城1<br/>
          品牌商城2<br/>
          品牌商城3
     </div>
   </td>
</tr>

</table>

</body>

 </html>

时间： 2024-07-29 13:54:59

制作横向菜单的相关文章

CSS制作横向导航菜单实例代码

CSS制作横向导航菜单实例代码:横向导航菜单是div css布局中最为基础的且必须要掌握额技能,对于稍有布局经验的朋友这都不是问题,但是对于初学者可能未必如此,所以这里分享一段最为基础的布局代码,希望能够给需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht

精通CSS+DIV网页样式与布局--制作实用菜单

在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表.无需表格的菜单.菜单的横竖装换,看下面一张思维导图: 首先,我们看项目列表,列表的符号,我们来看例子代码和运行效果: <span style="font-size:18px;"><span style="font-size:18px;"&g

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

Html用ul li实现多级横向菜单

<html> <head> <meta charset="utf-8"/> <title>UL LI 实现多级横向菜单</title> <style> #menu1 li{width:50px;height:20px;background:red;margin-left:2px;float:left} #menu1 li ul{display:none;} #menu1 li:hover ul{display:bl

带导航栏的横向菜单

MKHorizMenu 源码地址现在想要实现以下效果,其中“选时间”这部分是一个NavigationBar,“日期”是横向的菜单,“电影时段”是TableView. 比较难实现的是横向菜单,因为没有直接的控件可以用.开始我想用之前的方法,将TableView和TableViewCell倒置,实现横向TableView:但是会出现一个问题,每个Cell中的文本,都被省略显示,类似显示“2月...”. 原因是,在倒置TableView之前,TableView的宽很小(相当于图中横向菜单的高),那么

横向菜单效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>横向菜单</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <sty

二级横向菜单实现——ListView

实现类似于大众点评客户端的横向listview二级列表这种横向的listview二级列表在手机软件上还不太常见,但是使用过平板的都应该知道,在平板上市比较常见的.可能是因为平板屏幕比较大,而且也能展现更多的内容. 下面来看一下我的实现步骤. 首先自定义一个listview,代码如下: [html] view plaincopy public class MyListView extends ListView implements Runnable { private float mLastDo

CSS3背景制作导航菜单综合练习题

CSS3背景制作导航菜单综合练习题小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果任务 1.制作导航圆角提示:使用border-radius实现圆角 2.制作导航立体风格提示:使用box-shadow实现立体风格 3.制作导航分隔线提示:使用渐变与伪元素制作 4.删除第一个和最后一个导航分隔线提示:使用伪元素删除第一个和最后一个分隔线 <!doctype html> <html lang="en"> <head> <me

关于横向菜单和viewpage实现效果

MainActivity 1 package zhanghaijiao.bawei.com.yuekao_moni; 2 3 import android.graphics.Color; 4 import android.support.v4.app.Fragment; 5 import android.support.v4.app.FragmentManager; 6 import android.support.v4.app.FragmentPagerAdapter; 7 import an