`

横向菜单

htmlcss 
阅读更多

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
<!--
var timeout         = 500;
var closetimer  = 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{ 
 // cancel close timer
 mcancelclosetime();

 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

 // get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}

// close layer when click-out
document.onclick = mclose;
// -->
    </script>
<style>
#sddm
{ margin: 0;
 padding: 0;
 z-index: 30}

#sddm li
{ margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 11px arial}

#sddm li a
{ display: block;
 margin: 0 1px 0 0;
 padding: 4px 10px;
 width: 60px;
 background: #5970B2;
 color: #FFF;
 text-align: center;
 text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #EAEBD8;
 border: 1px solid #5970B2}

 #sddm div a
 { position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #EAEBD8;
  color: #2875DE;
  font: 11px arial}

 #sddm div a:hover
 { background: #49A3FF;
  color: #FFF}

</style>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="sddm">
        <!--如果栏目下没有子菜单就不用onmouseover="mopen('m1')" onmouseout="mclosetime()"以及下面的那个DIV -->
        <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
            <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript
                    DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a>
            </div>
        </li>
        <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
            <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a>
                <a href="#">DIV dropdown</a>
            </div>
        </li>
        <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
            <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="#">Visa Credit Card</a> <a href="#">Paypal</a>
            </div>
        </li>
        <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
            <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="#">Download Help File</a> <a href="#">Read online</a>
            </div>
        </li>
        <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
            <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a>
            </div>
        </li>
    </ul>
    <div style="clear: both">
    </div>
    <div style="clear: both">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>

    </form>
</body>
</html>

分享到：
| ASP.NET Get和Post两种提交的区别:
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    横向菜单 bootstrap 后台模板

    【横向菜单 Bootstrap 后台模板】是一款基于Bootstrap框架设计的后台管理界面模板，适用于构建颜色较为淡雅的Web应用程序。Bootstrap是Twitter推出的一款开源的前端框架，它提供了丰富的CSS样式和JavaScript组件，...

    二级横向菜单

    二级横向菜单是一种常见的网页导航设计，尤其适用于内容层级较深的网站。在这个场景中，我们将探讨如何实现一个二级横向菜单，以及相关的编程技术和设计原则。 首先，二级横向菜单通常由一级菜单项和它们对应的二级...

    ext3横向菜单

    这个“EXT3横向菜单”可能是指一个专门针对EXT3文件系统的图形用户界面（GUI）工具，它以横向布局展示菜单选项，便于用户管理EXT3文件系统。 在Linux中，文件系统是非常核心的部分，负责组织和存储数据。EXT3因其...

    div应用横向菜单效果演示

    本示例"div应用横向菜单效果演示"聚焦于如何利用`div`来实现一个横向导航菜单，这是一种常见的网站布局技巧，尤其适用于创建用户友好的界面。横向菜单通常位于页面顶部，提供清晰的导航链接，帮助用户快速访问网站的...

    Delphi 仿B/S横向菜单

    本篇文章将详细讲解如何利用Delphi编程语言来实现仿B/S（Browser/Server，浏览器/服务器）模式的横向菜单效果。 Delphi是一款强大的Windows应用程序开发工具，它基于Object Pascal编程语言，并提供了直观的可视化...

    Ext3.X横向菜单导航栏

    在Ext3.X中，横向菜单导航栏是一种常见的用户界面元素，它提供了清晰的层级结构，帮助用户在复杂的Web应用中快速定位和访问功能。本知识点将深入探讨如何在Ext3.X中实现横向菜单导航栏，并基于给定的描述和资源进行...

    双重横向菜单 多个swiper

    在IT行业中，设计一个具有双重横向菜单和多个swiper的交互界面是一项常见的挑战，这涉及到前端开发和用户体验设计的专业知识。Swiper是一款强大的触摸滑动插件，常用于创建响应式的轮播图、幻灯片或其他滑动内容展示...

    JavaScript横向菜单

    JavaScript横向菜单是一种常见的网页交互设计，它通常出现在网站顶部，为用户提供导航功能。在网页设计中，这样的菜单能够帮助用户快速地浏览网站的不同部分，提高用户体验。本文将深入探讨JavaScript在实现横向菜单...

    横向菜单导航

    横向菜单导航是网页设计中常见的元素之一，它通常位于页面顶部，水平展示网站的主要类别或功能，方便用户快速浏览和访问各个部分。这种导航模式在响应式设计中尤其重要，因为它们可以有效地适应不同屏幕尺寸，无论是...

    高仿网易新闻抽屉效果+横向菜单+页面滑动

    高仿网易新闻抽屉效果+横向菜单+页面滑动源代码，是一个很不错的Android源码，有兴趣的伙伴们抽时间可以看一下把

    flash效果横向菜单

    【横向菜单设计与实现】 在网页设计中，横向菜单是一种常见的布局方式，它通常位于页面顶部，方便用户快速访问网站的主要部分。这种菜单设计简洁、直观，尤其在Flash技术的加持下，能够创造出动态、吸引人的用户...

    css经典横向菜单,多种样式

    本主题聚焦于“CSS经典横向菜单，多种样式”，这是一种常见的网页导航设计模式，用于帮助用户在网站中轻松浏览和定位内容。下面将详细介绍如何创建和设计这样的菜单。 1. **基本结构**： 横向菜单通常由一个`&lt;ul&gt;`...

    flash 横向菜单源码

    在本案例中，我们关注的是"Flash横向菜单源码"，这是一个设计用于网站导航的交互式元素。以下是关于Flash横向菜单源码的相关知识点： 1. **Flash ActionScript**: Flash菜单主要通过ActionScript编程实现，这是一种...

    不错的js，打包了(微软横向菜单也在其中)

    标题提到的“不错的js，打包了(微软横向菜单也在其中)”意味着这个压缩包可能包含了一些实用的JavaScript代码，特别是与微软的横向菜单相关的实现。 微软横向菜单（Microsoft Horizontal Menu）通常是指一种网页...

    css 绚丽横向菜单大集合

    "css 绚丽横向菜单大集合"是一个专门收集了各种经典CSS横向菜单样式的资源，对于网页设计师和前端开发者来说，这是一个极具价值的学习和参考材料。 在这些横向菜单中，你可以学习到以下关键知识点： 1. **基础样式...

    XNScrollTopBar （Top横向菜单）

    第一行菜单可自定义菜单数量、菜单样式（宽、高，选中和非选中时的颜色） 2.第二行附加菜单可自定义滑块、菜单样式 3.两层菜单均可滑动，可设置动画，控制动画速度 4.通过currentIndexForMain和...

    横向单行菜单栏

    通过`android:numColumns`属性指定列数，对于横向菜单栏，通常设置为1。 2. **适配器**：创建一个自定义适配器，继承自BaseAdapter或ArrayAdapter。这个适配器负责填充数据，包括菜单项的标题和图标。适配器需要...

    Jquery横向菜单

    在这个“Jquery横向菜单”的实例中，我们将会探讨如何利用jQuery实现一个动态、灵活的水平导航菜单，该菜单具有弹出子菜单功能，并且能够方便地进行扩展，以适应不同数量的子项。 首先，我们需要在HTML结构中创建...

Magicbox
Global site tag (gtag.js) - Google Analytics