`

div+css js按钮特效 鼠标移上去显示子菜单

CSSMySQL电子商务HTMLXHTML 
阅读更多
<!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">
<TITLE>按钮</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<LINK href="style/skin2.css" type=text/css rel=stylesheet>

<SCRIPT type=text/javascript>             
var waitting = 1;             
var secondLeft = waitting;             
var timer;                             
var sourceObj;             
var number;             
function getObject(objectId)//获取id的函数              
    {             
        if(document.getElementById && document.getElementById(objectId)) {             
        // W3C DOM             
        return document.getElementById(objectId);             
        } else if (document.all && document.all(objectId)) {             
        // MSIE 4 DOM             
        return document.all(objectId);             
        } else if (document.layers && document.layers[objectId]) {             
        // NN 4 DOM.. note: this won't find nested layers             
        return document.layers[objectId];             
        } else {             
        return false;             
        }             
    }             
function SetTimer()//主导航时间延迟的函数             
    {             
        for(j=1; j <10; j++){             
            if (j == number){             
                if(getObject("mm"+j)!=false){             
                    getObject("mm"+ number).className = "menuhover";             
                    getObject("mb"+ number).className = "";             
                }             
            }             
            else{             
                 if(getObject("mm"+j)!=false){              
                    getObject("mm"+ j).className = "";             
                    getObject("mb"+ j).className = "hide";              
                }             
            }             
        }             
    }             
function CheckTime()//设置时间延迟后             
    {             
        secondLeft--;             
        if ( secondLeft == 0 )             
        {             
        clearInterval(timer);                                     
        SetTimer();                     
        }             
    }             
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟             
    {             
        number = Num;             
        sourceObj = thisobj;             
        secondLeft = 1;             
        timer = setTimeout('CheckTime()',100);             
    }             
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数             
    {             
        clearInterval(timer);             
    }             
</SCRIPT>

<!--导航开始-->
<DIV id=mainmenu_body>
<!--主导航开始-->
    <DIV id=mainmenu_top>
        <UL>
        <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>首页</A> </LI>
        <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CCS导航</A> </LI>
        <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>865171</A> </LI>
        <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS模板</A> </LI>
        <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>后台模板</A> </LI>
        <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS技巧</A> </LI>
        <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>CSS导航菜单</A> </LI>
        <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>HTML+CSS模板</A> </LI>
        <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="http://www.865171.cn/" target=_parent>SEO优化</A> </LI></UL>
    </DIV>
<!--子导航导航开始-->
    <DIV id=mainmenu_bottom>    
        <DIV class=mainmenu_rbg>      
            <UL class=hide id=mb1>
            <LI><A href="http://www.865171.cn/">本导航非常适合于分类比较多电子商务站等网站的导航模板版</A> </LI>
            <LI><A href="http://www.865171.cn/">此导航很漂亮落</A> </LI>
</UL>
           
            <UL class=hide id=mb2>
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
            <LI><A href="#" target=_parent>HTML+CSS教程</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
           
            <UL class=hide id=mb3>
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>免费模板网</A> </LI>
            <LI><A href="#" target=_parent>网上商城</A> </LI>
            <LI><A href="#" target=_parent>网上商城</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>电子商务</A> </LI>
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
           
            <UL class=hide id=mb4>
            <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>免费模板网首页</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
            <LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
            <LI><A href="#" target=_parent>MSSQL数据库</A> </LI></UL>
           
            <UL class=hide id=mb5>
            <LI style="DISPLAY: none"><A href="#" target=_parent>服务器租用首页</A> </LI>
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用首页</A> </LI>
            <LI><A href="#" target=_parent>服务器租用</A> </LI>
            <LI><A href="#" target=_parent>服务器托管</A> </LI>
            <LI><A href="#" target=_parent>超级机房</A> </LI>
            <LI><A href="#" target=_parent>CDN加速设施</A> </LI></UL>
           
            <UL class=hide id=mb6>
            <LI style="DISPLAY: none"><A href="#" target=_parent>企业邮局首页</A> </LI>
            <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>企业邮局首页</A> </LI>
            <LI><A href="#" target=_parent>绿色G级邮箱</A> </LI>
            <LI><A href="#" target=_parent>绿色企业邮箱</A> </LI></UL>
            <UL class=hide id=mb7>
           
            <LI style="DISPLAY: none"><A href="#" target=_parent>网站制作首页</A> </LI>
            <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>企业建站</A> </LI>
            <LI><A href="#" target=_parent>商城制作</A> </LI>
            <LI><A href="#" target=_parent>个人建站</A> </LI>
            <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
           
            <UL class=hide id=mb8 style="DISPLAY: none">
            <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>代理加盟</A> </LI>
            <LI><A href="#" target=_parent>代理加盟</A> </LI>
            <LI><A href="#" target=_parent>代理加盟</A> </LI></UL>
           
            <UL class=hide id=mb9>
            <LI style="MARGIN-LEFT: 180px"><A href="/agent/">代理加盟</A> </LI>
            <LI><A href="#" target=_parent>联系我们</A> </LI>
            <LI><A href="#" target=_parent>本站通知</A> </LI>
            <LI><A href="#" target=_parent>行业新闻</A> </LI>
            <LI><A href="#" target=_parent>诚聘英才</A> </LI></UL>
        <script src="js/main_nav.js"></script>
        </DIV>   
    </DIV>
</DIV>
</body>
</html>
分享到：
| div+css js选项卡
评论
1 楼 如果这就是爱情 2013-10-27  
有相应的CSS和JS代码吗?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Div+Css特效及JavaScript网页特效实例.rar

    例如，使用CSS为Div添加动画效果，配合JavaScript进行事件监听和处理，可以实现鼠标悬停时元素的变化、点击按钮后的反馈等。此外，还可以利用JavaScript操作DOM（文档对象模型），动态改变网页内容，实现更高级的...

    html页面特效(div+css样式),如有疑问请联系449253264@qq.com

    例如，使用CSS可以创建动态的悬停效果，当用户将鼠标移到某个链接或按钮上时，该元素会改变颜色、大小或显示额外信息。而下拉菜单则常用于导航栏，用户点击主菜单项后，会出现一个包含子菜单的列表。 “鼠标特效”...

    html+css+js实现轮播特效

    通过编写JS代码，我们可以监听用户的键盘、鼠标事件，比如点击按钮或导航点，触发轮播到下一张或上一张图片。常见的做法是使用定时器自动切换图片，以实现自动播放的效果。此外，还可以添加一些功能，如暂停/播放...

    用DIV+CSS技术设计的个人电影网站（web前端网页制作课作业）

    - **鼠标滑过特效**: 通过CSS或JavaScript实现当鼠标移动到某些元素时的视觉变化。 - **Table布局**: 尽管不建议在现代网页设计中广泛使用，但仍然适用于简单的数据展示表格。 - **导航栏效果**: 创建一个美观且易于...

    CSS+JQuery实现div翻转效果

    "CSS+JQuery实现div翻转效果"是一个常见的交互设计技术，常用于按钮、卡片或登录表单等元素，以增加视觉吸引力和交互性。这个技术结合了层叠样式表（CSS）的3D变换和JavaScript库JQuery的优势，下面我们将详细探讨...

    jquery鼠标点击按钮图标旋转弹出图标菜单旋转动

    这个特效在用户点击按钮时，图标会动态旋转，并展示出四个子菜单项，当鼠标悬停在子菜单项上时，会显示相应的提示文字。再次点击按钮，子菜单项则会以同样动态的方式收回。这一功能的实现涉及到了jQuery的选择器、...

    css3实现左侧菜单伸缩滑动特效特效代码

    这些子菜单项可以是`&lt;li&gt;`元素，每个`&lt;li&gt;`中包含一个触发按钮（如`&lt;a&gt;`标签）和一个可展开或折叠的内容区域。例如： ```html 菜单1 &lt;div class="menu-content"&gt;这是菜单1的内容&lt;/div&gt; 菜单2 &lt;div ...

    jQuery UI可拖拽弹性圆形菜单按钮特效.zip

    《jQuery UI可拖拽弹性圆形菜单按钮特效》 在网页设计和开发中，交互性和用户体验是至关重要的元素。jQuery UI库提供了一系列强大的工具，帮助开发者实现丰富的用户界面效果。本项目名为“jQuery UI可拖拽弹性圆形...

    JS模仿苹果系统菜单栏特效

    这些菜单项不仅有文字，还可能包含子菜单或者可操作的按钮。 在HTML部分，我们可以创建一个`&lt;div&gt;`元素作为菜单栏容器，每个菜单项则是一个`&lt;li&gt;`元素。例如： ```html &lt;div id="menuBar"&gt; 应用1 子菜单项1 ...

    jQuery液态式环形按钮菜单特效.zip

    例如，当鼠标悬停在菜单项上时，可以使用`fadeIn()`和`fadeOut()`方法实现按钮的淡入淡出，或者用`rotate()`函数来改变其旋转角度，模拟液态流动的效果。 ```javascript $(document).ready(function() { $('.menu-...

    CSS层折叠(或收缩)与展开特效

    "CSS层折叠(或收缩)与展开特效"是一个结合了这两种技术，实现网页元素动态显示与隐藏的交互效果。这种效果常见于导航菜单、侧边栏、内容区块等，它允许用户点击后展开或折叠内容，提高用户体验，尤其在内容丰富的...

    CSS3手风琴菜单特效代码.zip

    CSS3手风琴菜单是一种常见的网页交互元素，它以紧凑的形式展示多个可展开和收起的子菜单项。在网页设计中，这种菜单常用于节省空间，尤其是在内容丰富的导航栏或信息展示区域。本教程将深入探讨CSS3手风琴菜单的工作...

    jQuery CSS3侧边弹出菜单.zip

    这个结构可能包含一个主要的侧边栏容器，里面包含多个菜单项（链接或者子菜单）。每个菜单项可能有对应的触发按钮，当点击按钮时，会触发jQuery事件来控制菜单的显示和隐藏。 例如，HTML代码可能如下： ```html ...

    网页特效 网页特效代码

    也可能会有导航栏的下拉菜单实现，通过JavaScript监听鼠标悬停事件，动态展示子菜单。 总的来说，网页特效代码的掌握对于一个前端开发者至关重要，它不仅能够使网页更具吸引力，还能提高用户与网页的交互性。不断...

    HTML如何制作公司网站首页（web前端期末大作业）

    - 使用JavaScript或jQuery添加交互效果，例如当鼠标悬停在某个菜单项上时显示子菜单。 **示例代码**: ```html &lt;li&gt;&lt;a href="#"&gt;关于我们 &lt;li&gt;&lt;a href="#"&gt;公司历史&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;团队成员&lt;/a&gt;...

    JS各种实例web前端

    3. **弹出层**（Modal）：弹出层是网页中的一种交互设计，用户点击按钮或链接后，一个半透明的对话框会在当前页面之上弹出，显示额外的信息。JS可以控制显示、隐藏弹出层，并处理用户的交互行为。 4. **下拉菜单**...

    html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css

    - **鼠标滑过特效**: 通过CSS的`:hover`伪类可以实现鼠标悬停时的视觉效果变化，比如颜色改变、显示隐藏元素等。 - **导航栏效果**: 利用CSS实现动态导航栏，如下拉菜单、高亮当前选中项等功能。 - **Banner**: 通常...

    JS右侧栏导航特效特效代码

    在本案例中，"JS"代表JavaScript，这是一种广泛用于网页动态效果的编程语言，而"右侧栏导航"则是指这种导航菜单位于页面右侧的设计。 JavaScript 为开发者提供了丰富的功能，可以创建复杂的动态效果，如滑动、淡入...

    jQuery仿Windows10桌面开始菜单及开关机特效源码.zip

    开始菜单的核心是HTML结构，通过创建一系列的`&lt;div&gt;`元素来模拟菜单项和子菜单项。使用CSS进行样式设置，包括颜色、字体、边框和阴影，以达到与Windows10界面相似的视觉效果。jQuery则用于动态添加、删除和管理这些...

    jquery带下拉菜单和焦点图.zip

    当鼠标进入父级菜单时，显示子菜单；离开时，隐藏子菜单。 三、焦点图的实现 1. HTML布局：焦点图由一组图片和控制按钮组成，图片通常设置为同一尺寸，用`&lt;div&gt;`包裹，每个图片对应一个类名，用于区分。 2. CSS...

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