您的当前位置:首页正文

DIV菜单层实现代码_javascript技巧

2023-12-03 来源:布克知识网

他便给我截了个图是,QQ商城的分类菜单,效果如下:我看了一下,咦!咱们这博客园也是这种呀!我自己之前也没做过这种效果,正好自己试试!(我不是做美工的,不过到js略懂罢了!) 一、分析: 1,右边大分类肯定是一个层下面用divMenuContent表示 2,左边鼠标移上去的那个应该也是个层,下面用divMenuItem表示 问题:怎么样表现过如图的样子呢?左边和右边看起来是一体的!于是想到divMenuItem的右边为none,而且z轴高于divMenuContent,让它正好压在divMenuContent的边框上! 下面是两个层的样式: 代码如下: #divMenuItem { position:absolute; z-index:99; width:147px; height:25px; border:3px solid #963; border-right:0px; background-color:#FC9; display:none; } #divMenuContent { display:none; position:absolute; z-index:98; width:200px; height:505px; border:3px solid #963; background-color:#FC9; } 然后布局一个页面测试用: 代码如下:

  • aaaaaaaaaaaaa
  • bbbbbbbbbbbbb
  • cccccccdccccc
  • ddddddddddddd
  • eeeeeeeeeeeee
  • fffffffffffff
  • ggggggggggggg
  • hhhhhhhhhhhhh
  • 简单设置一下menu的样式: 代码如下: body { margin:0px; padding:0px; } .menu { list-style-type:none; float:left; border:1px solid green; width:150px; } .menu li { height:25px; background-color:#CCC; border:1px solid red; } 主要实现: 代码如下: $("#menu li").mouseenter(function() { var offset=$(this).offset(); $("#divMenuItem") .offset({ top:offset.top,left:offset.left }) .html($(this).html()) .show() $("#divMenuContent") .offset({ top:offset.top,left:offset.left+$(this).width()-1 }) .show() }) 这里主要就是定位问题了!逻辑上是对的,可发现除一次移上去显示正常外,以后每移上的第一个都有点错位!这里也是一直没搞明白是怎么回事!后来在show()后又offset()了一下就好了,希望高人指明。 修改后的全部JS如下: 代码如下: $(function(){ $("#divMenuItem,#divMenuContent").mouseout(function(e) { if($(e.toElement).parent().attr("id")!="menu" && $(e.toElement).attr("id")!="divMenuContent") { $("#divMenuItem").hide(); $("#divMenuContent").hide(); } }) $("#menu li").mouseenter(function() { var offset=$(this).offset(); $("#divMenuItem") .offset({ top:offset.top,left:offset.left }) .html($(this).html()) .show() .offset({ top:offset.top,left:offset.left }); $("#divMenuContent") .offset({ top:offset.top,left:offset.left+$(this).width()-1 }) .show() /* .offset({ top:offset.top,left:offset.left+$(this).width()-1 });*/ .offset({ top:$("#menu li").first().offset().top,left:offset.left+$(this).width()-1 }); }) })

    里面有一块注释,offset()那块,它和下面的offset()是两个效果,现在的效果图:

    注释部分换一下效果图:

    效果已在:IE6,7,8,chrome中测试通过!代码打包下载/201011/yuanma/menu_jquery1.rar

    小编还为您整理了以下内容,可能对您也有帮助:

    如何用js通过下拉菜单来实现div的隐藏和显示知道

    思路:利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下:
    1、HTML结构
    <select id="test_select">
    <option value="1">显示</option>
    <option value="2">隐藏</option>
    </select>
    <div id="test">我是一个div么呀我是一个div</div>
    2、javascript代码
    window.onload = function(){
    var obj_select = document.getElementById("test_select");
    var obj_div = document.getElementById("test");
    obj_select.onchange = function(){
    obj_div.style.display = this.value==1? "block" : "none";
    }
    }
    3、效果演示

    如何用js通过下拉菜单来实现div的隐藏和显示知道

    思路:利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下:
    1、HTML结构
    <select id="test_select">
    <option value="1">显示</option>
    <option value="2">隐藏</option>
    </select>
    <div id="test">我是一个div么呀我是一个div</div>
    2、javascript代码
    window.onload = function(){
    var obj_select = document.getElementById("test_select");
    var obj_div = document.getElementById("test");
    obj_select.onchange = function(){
    obj_div.style.display = this.value==1? "block" : "none";
    }
    }
    3、效果演示

    怎么实现用div+javaScript+css实现的纵向菜单5标签:实现,纵向,菜单

    纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧! 如图所示的效果,我们先看一下代码结构: <div id="nav"> <h1>CSS</h1> <h2><a href="#">css入门</a></h2> <h2><a href="#">css进阶</a></h2> <h2><a href="#">css高级</a></h2> <h1>webUI</h1> <h2><a href="#">理论知识</a></h2> <h2><a href="#">实战应用</a></h2> <h2><a href="#">高级技巧</a></h2> <h1>DOM</h1> <h2><a href="#">DOM入门</a></h2> <h2><a href="#">DOM应用</a></h2> <h2><a href="#">DOM与浏览器</a></h2> <h1>XHTML</h1> <h2><a href="#">参考手册</a></h2> <h2><a href="#">交流论坛</a></h2> </div> 从以上可以看出,这次的XHTML部分的代码横向代码略有不同,我们没有继续使用ul和li标签,其实继续使用ul元素也能完好的实现纵向导航系统,但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉,开拓更多的设计思想。 这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题,h2来做二级分类下面的细节内容。在XHTML的意义中,h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义,直接使用h1,h2来表示层级关系,相对于在标签中加入id或class来做层级的标记更为简单和直观,在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计: #nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} #nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} #nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} 本css代码部分采用了简化写法,如果哪句意思看不懂,您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了,相信经过这样几次练习,这些代码您已经能完全看懂了,说明您离高手又近了一步了。 大家可能已经注意到了,#nav的边框本例中只设置了左右下和一像素,而没有上,而在h1的样式里设置了上部的上像素?这是为什么呢?因为h1的样式上部都有一条横线,如果nav上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。 好了,完整的效果可以预览一下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" " target="_blank">http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纵向导航菜单</title> <style>div+javaScript+css实现的纵向菜单5标签 #nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} #nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} #nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} </style> </head> <body> <div id="nav"> <h1>CSS</h1> <h2><a href="#">css入门</a></h2> <h2><a href="#">css进阶</a></h2> <h2><a href="#">css高级</a></h2> <h1>webUI</h1> <h2><a href="#">理论知识</a></h2> <h2><a href="#">实战应用</a></h2> <h2><a href="#">高级技巧</a></h2> <h1>DOM</h1> <h2><a href="#">DOM入门</a></h2> <h2><a href="#">DOM应用</a></h2> <h2><a href="#">DOM与浏览器</a></h2> <h1>XHTML</h1> <h2><a href="#">参考手册</a></h2> <h2><a href="#">交流论坛</a></h2> </div> </body> </html> 提示:可以先修改部分代码后再运行

    如何在javascript伸缩型菜单中实现代码

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:

    运行效果截图如下:

    具体代码如下:

    <html>

    <head>

    <title>真正的JavaScript伸展收缩型菜单</title>

    <style type="text/css">

    #con div{width:100px;margin:5px 0 5px 0;font-size:9pt;height:23px;color:white;}

    </style>

    <div id="con">

    <div style="background-color:red">红色菜单</div>

    <div style="background-color:green">绿色菜单 </div>

    <div style="background-color:blue">蓝色</div>

    <div style="background-color:yellow"></div>

    <div style="background-color:pink">这是什么色</div>

    <div style="background-color:orange">桔色</div>

    <div style="background-color:black">黑色超酷</div>

    </div>

    <script language="javascript">

    function $(e){return document.getElementById(e);}

    function roulMenu(e,maxW,minW){

    var divs = $(e).getElementsByTagName('div');

    for(var i=0;i<divs.length;i++){

    (function(){

    var tims,timss;

    divs[i].onmouseover=function(){

    var self = this;

    clearInterval(timss);

    tims=setInterval(function(){

    if(self.offsetWidth<maxW){

    self.style.width = self.offsetWidth + 5 + 'px';

    }else{

    clearInterval(tims);

    }

    },10);

    }

    divs[i].onmouseout=function(){

    var self = this;

    clearInterval(tims);

    timss=setInterval(function(){

    if(self.offsetWidth>minW){

    self.style.width = self.offsetWidth - 5 + 'px';

    }else{

    clearInterval(timss);

    }

    },10);

    }

    })();

    }

    }

    //使用方法

    roulMenu('con',200,100);

    </script>

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    Top