html下拉菜单z怎么出现在选项右侧,**onclick怎样实现点击屏幕右侧主菜单后出现屏幕右侧的下拉菜单？*...

最新推荐文章于 2022-03-29 00:32:55 发布
最新推荐文章于 2022-03-29 00:32:55 发布
阅读量291 收藏
点赞数
文章标签： html下拉菜单z怎么出现在选项右侧

想实现的效果是点击图中右侧的“按类别查看宝贝”时，出现图中屏幕右侧的下拉菜单。当前是悬浮时出现下拉菜单，想改成点击后出现。我自己试了下onclick事件，但未成功。有以下疑问：

只用onclick能否解决问题？

如果需要配合javascript,应怎样用最简洁实用的js代码实现？(尽量不用jquery,实在实现不了也可以用)

本人对onclick等事件以及javascript非常不熟悉，希望您能给把代码改一下，俺顺便也学习一下。或者给支个招。希望您的回帖成为我尽快学习js等的动力：)

多谢！

bVbloM1?w=1272&h=753

这里是代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

演示页面

* {margin:0 auto;padding:0;}

body {

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

a {text-decoration:none;}

.clear {clear:both;zoom:1;height:0;line-height:0;font-size:0;}

.row-holder {

clear:both;

padding-top:24px;padding-bottom:24px;border:0px solid;

width:1016px;

height:;

}

.row-holder:after {clear:both;height:0;line-height:0;font-size:0;}

.left {float:left;padding-left:20px;margin-bottom:0px;

padding-top:0px;width:;border:0px solid;}

.mid-board-holder {

width:1016px;height:;margin-top:24px;border:0px solid;

padding-top:0px;padding-bottom:0px;

text-align:center;

}

.mid-board-container-L {float:left;border:0px solid;

}

.mid-board-container-L ul {

list-style:none;float:left;clear:both;zoom:1;

width:236px;height:;border:0px solid;

padding-bottom:34px;

}

.mid-board-container-L li { text-align:left;

padding-top:0;text-indent:6px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;border:0px solid;

}

.mid-board-container-L ul li span {float:right;

margin-right:12px;border:0px solid;

width:50px;text-align:right;overflow:hidden;

white-space:nowrap;text-overflow:ellisis;

}

.mid-board-container-L li a { border:0px solid;

font-size:14px;color:#444;

font-family:Arial,

Microsoft YaHei,Simsun;

padding-left:0px;padding-right:0px;

line-height:38px;

width:236px;height:38px;

}

.mid-board-container-L li a:hover {float:left;

background-color:#f2f2f2;

}

.mid-board-container-L .custom {clear:both;float:left;

width:234px;height:36px;

background-color:#f56400;

border:1px #dc5a00 solid;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

font-size:14px;color:#fff;font-weight:400;

line-height:36px;font-family:Microsoft

YaHei,Simsun;

}

.mid-board-container-L .custom a {color:#fff;}

.mid-board-container-L .contact {clear:both;float:left;

width:234px;height:34px;margin-top:12px;

background-color:#fff;

border:1px #d9d9d9 solid;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

font-size:14px;color:#444;font-weight:400;

line-height:34px;font-family:Microsoft

YaHei,Simsun;

}

.mid-board-container-L .contact a {color:#444;}

.store-items {float:left;font-size:16px;font-weight:700;line-height:16px;

font-family:Microsoft YaHei,Simsun;padding:0;margin:0;

padding-bottom:24px;color:#444;padding-top:20px;

}

.mid-board-secline,.mid-board-secline1 {float:left;clear:both;

width:236px;border-top:1px #e1e3df solid;

margin-top:30px;margin-bottom:36px;

}

.mid-board-secline1 {marigin-top:32px;margin-bottom:27px;}

.mid-board-sales,.report {float:left;clear:both;

float:left;clear:both;line-height:14px;

font-family:Arial,Microsoft YaHei,Simsun;

font-size:14px;color:#444;font-weight:400;

}

.mid-board-sales a,.report a {color:#444;}

.mid-board-container-R {float:left;border:0px solid;

width:762px;margin-left:18px;

}

.mid-board-container-R .sortbox {

float:right;clear:both;line-height:36px;

width:166px;height:36px;

border:1px #d9d9d9 solid;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

.mid-board-container-R .sortbox .sort-icon {

float:right;margin-right:12px;margin-top:15px;

}

.mid-board-container-R .sortbox .sort {font-size:12px;color:#888;

font-family:Microsoft YaHei,Simsun;

margin-left:12px;float:left;

line-height:34px;

}

.mid-board-container-R .sortbox .sort a {color:#888;}

.mid-board-container-R .sortbox .dmenu ul {float:left;clear:both;

margin-top:4px;position:relative;

z-index:10000;

top:4px;left:-30px;

list-style:none;

border:1px #e5e5e5 solid;

width:196px;height:180px;

border-radius:3px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

display:none;

}

.mid-board-container-R .sortbox .dmenu li {text-align:left;

font-size:12px;color:#;

font-family:Microsoft YaHei,Simsun;

}

.mid-board-container-R .sortbox .dmenu li a {padding-left:0px;text-indent:18px;

clear:both;float:left;

color:#444;line-heigth:30px;

width:196px;

background-color:#fff;float:left;

}

.mid-board-container-R .sortbox .dmenu li a:hover {

background-color:#f5f5f5;

}

.mid-board-container-R .sortbox:hover .dmenu ul{display:block;}

.mid-board-cardL {padding:0;

float:left;width:241px;height:192px;margin-right:0px;

border-radius:3px;border:0;

-webkit-border-radius:3px;

-moz-border-radius:3px;border:0px # solid;

object-fit:cover;

}

.mid-board-cardR {padding:0;

float:left;width:242px;height:192px;margin-right:0px;

border-radius:3px;border:0;

-webkit-border-radius:3px;

-moz-border-radius:3px;border:0px # solid;

object-fit:cover;

}

.mid-board-container-R .more-items a {color:#666;}

.store-cmmt-holder {

width:1016px;margin-top:48px;

}

宝贝

进入订制填单
与店主联系

销量4312

报告本店

Jun Duanmu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VBA设置多级下拉菜单.xlsm
06-18
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
html实现右键弹出菜单
yao_1996的博客
09-24 4526
html&css实现右键弹出菜单html代码css代码js代码 html代码 <body oncontextmenu="showMenu(event)"> <div class="contextmenu" id="context"> <ul> <li><a href="javascript:toDetail_();">详情</a></li> <li><a hr
html左侧导航栏右侧显示内容
无心
08-02 2万+
效果图 代码 复制下来直接运行就可以 <!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
html5侧边栏鼠标悬浮显示
yushun的博客
08-12 2008
疫情在家做网站的时候弄的一个东西，本人对前端不是很了解找了好多资料才弄出来的前端用的layui <div style="position: fixed;right: 0;bottom: 20%;z-index: 50"> <a type="button" class="layui-btn layui-btn-sm" id="more" style="background: rgba(0,0,0,0.5);border: 1px rgba(255, 195, 90,0.6) soli
gin c.html(),go web框架gin介绍和使用（一）
weixin_34467704的博客
06-15 1449
本文是gin介绍和使用的第一篇文章。一、简要介绍Gin的官方说明如下：Gin is a web framework written in Go (Golang). It features a martini-like API with much betterperformance, up to 40 times faster thanks to httprouter. If you need pe...
vue实现鼠标移过出现下拉二级菜单功能
10-15
主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
html.zip_html_html 菜单_html下拉菜单_下拉菜单_网页换肤
09-14
html在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序
HTML+CSS实现简单下拉菜单效果
09-24
使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
11-19
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
gin框架23--绑定 HTML 复选框
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
03-29 648
gin框架23--绑定 HTML 复选框介绍案例说明 介绍 本文通过一个简单的案例，将结构体和html中的 form 数据绑定在一起。 案例 源码： main.go package main import ( "github.com/gin-gonic/gin" ) type myForm struct { Colors []string `form:"colors[]"` } func main() { r := gin.Default() r.LoadHTMLGlob("views/*"
JAVA下拉列表改变跳转到方法_JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转...
weixin_36452340的博客
03-07 416
程序要求：编写一个html文件的网页代码，页面包含一个下拉列表框、一个文本框和一个按钮，下拉列表框选择要去的网站，当选择完毕后文本框中出现对应的网址。点击确认跳转按钮后访问文本框中出现的网址。实现效果：实现代码：JavaScript事件请选择百度网易qq新浪确认跳转function surf(){select=document.getElementById("select_www").value;...
html中选取下拉框，显示对应的图片的两种方法
qq_36608036的博客
11-11 5745
方法一（使用jquery库）： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>魔兽世界八大种族</title> <!-- 导入 jQuery 库 --> <script type="text/javascript" src="jquery-1.7.2.js"></script> &l
html右侧划出层,如何用animate实现点击按钮时右侧弹出一个层，再点一下，层被隐藏...
weixin_42524945的博客
06-01 272
Document*{padding:0;margin: 0;}html{font-size:20px;}button{padding:.2rem 1rem;font-size:1rem;line-height:1;border:1px solid #67a;box-shadow:.1rem .1rem .3rem .2rem gray;color:#fff;text-shadow:.1rem -....
html点击文字下拉,利用jQuery实现可输入搜索文字的下拉框
weixin_39608657的博客
06-03 809
先看效果功能：点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面。用的的js：var $xialaSELECT;$(document).ready(function(){initXialaSelect();initSearch();});var temptimeout=null;var query="";function sea...
html下拉框的选择js代码添加控件,原生js实现下拉框选择组件
weixin_35834687的博客
06-08 1082
本文实例为大家分享了js实现下拉框选择组件的具体代码，供大家参考，具体内容如下功能需求：1、点击div后，div显示聚焦状态，同时显示下拉框内容；2、选择儿童人数后，如果儿童人数大于0，在下方出现对应的儿童年龄选择框数量；3、成人人数的选择范围是1-7，儿童人数的选择范围是0-4，儿童年龄的选择范围是<1、1-17；4、点击确认按钮后，将选择好的成人人数和儿童人数显示在最上方的div内；5、...
HTML中下拉框的简单介绍＜Select＞＜option＞
热门推荐
yangxin_blog的专栏
10-23 11万+
下拉框在生活中应用很广
html下拉表单选择后自动跳转,HTML表单第一个下拉自动改变第二个下拉选项（续）...
weixin_29279153的博客
06-03 511
取而代之的是，当我选择“卡车”时，仅出现车辆的下拉菜单，而不是第二个出现颜色的车辆。，所以我想是我实现它，这里的方式是我的代码，如果有人可以计算出我哪里错了：HTML页面Add Item « Go to Inventory List CategoryCategory 2Please SelectCarsTrucksMotorcyclesBoatswhiteblackredgreenblue...
html下拉菜单右侧显示,css如何设置下拉菜单？
weixin_39621235的博客
05-30 2138
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用css设置下拉...
在一个html 嵌入另一个html的下拉菜单出现层叠问题
最新发布
06-10
出现层叠问题的原因可能是两个 HTML 页面之间的 CSS 样式冲突。你可以使用以下方法来避免这个问题： 1. 在嵌入的 HTML 页面中使用独立的 CSS 文件，将样式定义在这个文件中，并在 HTML 中引入这个 CSS 文件，这样可以避免与主页面的样式冲突。 ```html <!-- 嵌入的 HTML 文件 --> <html> <head> <title>嵌入的下拉菜单</title> <link rel="stylesheet" href="嵌入文件的样式.css"> </head> <body> <select> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> </body> </html> ``` 2. 在主页面和嵌入的 HTML 页面中都使用 CSS 的命名空间（namespace）来区分样式，这样可以避免样式冲突。 在主页面中： ```html <!-- 主 HTML 文件 --> <!DOCTYPE html> <html> <head> <title>主页面</title> <style> /* 定义主页面的样式 */ .main-page { /* 样式定义 */ } </style> </head> <body> <h1>主页面</h1> <!-- 嵌入的 HTML 文件 --> <iframe src="嵌入的文件.html" class="embedded-page"></iframe> </body> </html> ``` 在嵌入的 HTML 页面中： ```html <!-- 嵌入的 HTML 文件 --> <html> <head> <title>嵌入的下拉菜单</title> <style> /* 定义嵌入的页面的样式 */ .embedded-page { /* 样式定义 */ } </style> </head> <body> <select> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> </body> </html> ``` 以上两种方法都可以避免样式冲突问题，你可以根据具体情况选择其中一种或多种方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值