js底部自定义菜单代码（js下拉菜单代码）[20240420更新]

今天给各位分享js底部自定义菜单代码的知识，其中也会对js下拉菜单代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、怎么用js做出自定义菜单对li标签 右键 删除/变颜色 效果
• 2、JS+DIV实现自定义html右键菜单
• 3、求js 自定义右键菜单代码，只要在网页上右键弹出菜单就行
• 4、谁内给我讲一将如下 下拉菜单的js代码

怎么用js做出自定义菜单对li标签 右键 删除/变颜色 效果

js里面没有直接的右击事件，可采用onmousedown事件进行判断实现。如下：

document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    //alert("你点了右键");

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键");

                }else if(e.button ==1){

                    alert("你点了滚轮");

                }

            }

2、数据的过滤方法有很多，javaScript 、jQuery里面的filter函数，鉴于本题，最好采用angularJs实现。总体 参考代码如下：

!DOCTYPE html

html

head

    meta charset="utf-8"

    script src=""

    /script

    script type="text/javascript"

        window.onload = function(){

            //去掉默认的contextmenu事件，否则会和右键事件同时出现。

            document.oncontextmenu = function(e){

                e.preventDefault();

            };

            document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    alert("你点了右键");

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键");

                }else if(e.button ==1){

                    alert("你点了滚轮");

                }

            }

        }

    /script

/head

body

div ng-app="myApp" ng-controller="namesCtrl"

    p输入过滤:/p

    pinput type="text" ng-model="test"/p

    ul

        li ng-repeat="x in names | filter:test | orderBy:'pin'"

            {{ (x.name | uppercase) + ', ' + x.pin }}

        /li

    /ul

/div

script

    angular.module('myApp', []).controller('namesCtrl', function($scope) {

        $scope.names = [

            {name:'张三',pin:'zhang san'},

            {name:'王斌',pin:'wang bin'},

            {name:'张春桥',pin:'zhang chun qiao'},

            {name:'王滨',pin:'wang bin'}

        ];

    });

/script

div style="width: 600px;height:50px;margin:auto;border:1px solid pink" id="test"

    p朝鲜新建农场/p

/div

/body

/html

JS+DIV实现自定义html右键菜单

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

titleJS实现自定义右键菜单/title

meta http-equiv="content-type" content="text/html; charset=gbk"

script src=""/script

style type="text/css"

#container {

text-align : center;

width : 500px;

height : 500px;

border : 1px solid blue;

margin : 0 auto;

}

.skin {

width : 100px;

border : 1px solid gray;

padding : 2px;

visibility : hidden;

position : absolute;

}

div.menuitems {

margin : 1px 0;

}

div.menuitems a {

text-decoration : none;

}

div.menuitems:hover {

background-color : #c0c0c0;

}

/style

script

window.onload = function() {

var container = document.getElementById('container');

var menu = document.getElementById('menu');

/*显示菜单*/

function showMenu() {

var evt = window.event || arguments[0];

/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/

var rightedge = container.clientWidth-evt.clientX;

var bottomedge = container.clientHeight-evt.clientY;

/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/

if (rightedge menu.offsetWidth)

menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";

else

/*否则，就定位菜单的左坐标为当前鼠标位置*/

menu.style.left = container.scrollLeft + evt.clientX + "px";

/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/

if (bottomedge menu.offsetHeight)

menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";

else

/*否则，就定位菜单的上坐标为当前鼠标位置*/

menu.style.top = container.scrollTop + evt.clientY + "px";

/*设置菜单可见*/

menu.style.visibility = "visible";

LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);

}

/*隐藏菜单*/

function hideMenu() {

menu.style.visibility = 'hidden';

}

LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);

LTEvent.addListener(container,"contextmenu",showMenu);

LTEvent.addListener(document,"click",hideMenu);

}

/script

/head

body

div id="menu" class="skin"

div class="menuitems"

a href="javascript:history.back();"后退/a

/div

div class="menuitems"

a href="javascript:history.back();"前进/a

/div

hr

div class="menuitems"

a href="" target="_blank"地图api/a

/div

div class="menuitems"

a href="" target="_blank"实时交通/a

/div

div class="menuitems"

a href="" target="_blank"地图搜索/a

/div

div class="menuitems"

a href="" target="_blank"驾驶导航/a

/div

hr

div class="menuitems"

a href="" target="_blank"灵图UU/a

/div

div class="menuitems"

a href="" target="_blank"路书下载/a

/div

hr

div class="menuitems"

a href="" target="_blank"关于本站/a

/div

div class="menuitems"

a href="" target="_bland"友情链接/a

/div

/div

div id="container"

p右键此区域/p

/div

/body

/html

求js 自定义右键菜单代码，只要在网页上右键弹出菜单就行

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style

#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;margin:0; padding:0;}

#ul1 li{list-style:none}

/style

script

document.oncontextmenu=function(ev){

var oEvent=ev||event;

var oUl=document.getElementById('ul1');

oUl.style.display='block';

oUl.style.left=oEvent.clientX+'px';//如果超出可视区就加scroll

oUl.style.top=oEvent.clientY+'px';

return false;

}

document.onclick=function ()

{

var oUl=document.getElementById('ul1');

oUl.style.display='none';

};

/script

/head

body

ul id="ul1"

li自己添加/li

li2/li

/ul

/body

/html

谁内给我讲一将如下 下拉菜单的js代码

第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。

第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样

第三 触发这个函数时 把子菜单的显示属性设置为显示 如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性 这里可以改成menu.style.display="";

第四 document.onclick = hidmenu；是给网页单击事件指定处理函数

这是例子，如果是放到实际网页里就不能这么写了

最好是给每个a标签指定 onclick事件

像下边一样 a href="javascript:showmenu()"下拉菜单/a

js底部自定义菜单代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js下拉菜单代码、js底部自定义菜单代码的信息别忘了在本站进行查找喔。