JavaScript 结合 CSS 制作带背景图的下拉菜单

最新推荐文章于 2021-06-03 02:02:50 发布
最新推荐文章于 2021-06-03 02:02:50 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： C# 练手 文章标签： javascript css ie function class url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/david_zl/article/details/41426
版权
本文介绍了如何从动网论坛的JavaScript和CSS代码中汲取灵感，手工制作一个自定义的下拉菜单。通过示例1和示例2展示了两种不同风格的菜单，并提供了HTML、CSS和JavaScript代码。文章还提到了在不同浏览器（包括IE）上的兼容性问题。
摘要由CSDN通过智能技术生成

剥离动网论坛的 JavaScript & CSS 文件，手工做了一个自己的下拉菜单，不用类库真麻烦。

不过，还是先谢谢动网共享源码。

样式一

样式二

=============================

Demo.htm 代码

<html>
 <head>
  <title>演示动态创建菜单及 CSS 风格</title>
  <script language="javascript" src="hudark.js" type="text/JavaScript"></script>
  <link href="main.css" type="text/css" rel="stylesheet">
 </head>
 <body MS_POSITIONING="GridLayout">
  <TABLE height="588" cellSpacing="0" cellPadding="0" width="179" border="0" ms_2d_layout="TRUE">
   <TR>
    <TD width="0" height="0"></TD>
    <TD width="10" height="0"></TD>
    <TD width="169" height="0"></TD>
   </TR>
   <TR vAlign="top">
    <TD width="0" height="15"></TD>
    <TD colSpan="2" rowSpan="2">
     <form id="form1" method="post" runat="server">
      <TABLE height="162" cellSpacing="0" cellPadding="0" width="576" border="0" ms_2d_layout="TRUE">
       <TR vAlign="top">
        <TD width="168" height="136"></TD>
        <TD width="408"></TD>
       </TR>
       <TR vAlign="top">
        <TD height="26"></TD>
        <TD>
         <table ID="Table1" border="tableBorder2" cellSpacing="0" height="25" cellPadding="0" width="407"
          align="center">
          <tr>
           <td><A οnmοuseοver="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>腾讯</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&amp;boardid=0>主题数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&amp;boardid=0>总帖数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&amp;boardid=0>在线图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineinfo&amp;boardid=0>在线情况</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>用户组在线图例</a></div>')">例1</A></td>
           <td>A2</td>
           <td><A οnmοuseοver="showmenu2(event,'<div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&amp;boardid=0>腾讯</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&amp;boardid=0>主题数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&amp;boardid=0>总帖数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt

最低0.47元/天 解锁文章
david_zl
关注
专栏目录
js 特效 html 特效 带图片下拉菜单
06-13
js 特效 html 特效 带图片下拉菜单 js 特效 html 特效 带图片下拉菜单
js实现下拉框选择要显示图片的方法
10-24
主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
创建基于JavaScript的水平导航下拉菜单
Sarkuya的编程园地
10-31 1万+
在Web应用上创建一个下拉菜单，可以有多种方法。有些基于CSS来实现，有些基于JavaScript来实现。这两种方法各有优劣。基于CSS的实现只使用CSS技术，比较好掌握，但不容易应付比较复杂，如多级菜单的情况，而且往往还需要采用各种hacks来应付不同浏览器的怪癖。而基于JavaScript的实现，原则上还需要CSS来负责页面的表现，但使用JavaScript来与用户交互。应该说，CSS属于表现
单纯使用CSS实现下拉菜单
林洪炳的日常技术积累
07-26 3192
教你单纯使用css实现下拉菜单
CSS带背景装饰的下拉菜单，支持三级分类
06-05
CSS实现的下拉菜单导航，支持三级下拉分类，背景色为横向渐变导航
jQuery结合CSS制作动态的下拉菜单
10-23
在本篇文章中，我们主要学习如何利用jQuery结合CSS来制作一个动态的下拉菜单，这种下拉菜单不仅节省空间，而且能提供良好的用户体验。 首先，我们要在页面的部分引入jQuery库，这是使用jQuery语法的前提。具体操作...
jquery和css实现图片效果下拉菜单
01-23
综上所述，通过巧妙地结合CSS和jQuery，我们可以轻松地创建一个具有图片效果的下拉菜单。这不仅可以提高用户体验，还能使网页模板更具个性。记得在实际开发中，要考虑到不同浏览器的兼容性，并根据项目需求进行适当...
推荐10个CSS3 制作的创意下拉菜单效果
09-25
使用CSS3来制作下拉菜单，主要依靠CSS的动画、过渡、变换以及背景渐变等特性。设计师可以根据不同需求，利用这些特性创造出各式各样的下拉菜单效果。例如，向下滑动的导航菜单通过CSS3的变换属性来实现平滑的过渡...
javascript经典特效---带图片下拉菜单.rar
12-29
在JavaScript编程领域中，"带图片下拉菜单"是一种常见的交互设计，用于提升网站或应用程序的用户体验。这种特效使得用户可以通过点击一个主菜单项来展开一个包含多个子选项的下拉菜单，其中每个子选项可能伴有相关的...
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟下拉菜单是一项常见的任务，特别是在网页设计和开发中。这个场景中，作者面临的需求是在一个非Windows主题风格的项目中创建一个自定义的下拉菜单。以下将详细介绍如何使用JavaScript实现...
JavaScript+CSS模拟出的漂亮下拉菜单
05-16
内容索引:脚本资源,Ajax/JavaScript,下拉菜单　　JavaScript+CSS模拟出的漂亮下拉菜单，做的仓促，虚心接受批评。请注意代码的最后部分，添加这部分代码可以确保点击body区域的时候 也可以隐藏菜单，代码里我加有注释。压缩包里有一个封装好的类，它的作用主要是获取Select菜单、根据参数分别获取div，并分别添加事件、获取option，并分别添加到各个li、点击body区域（非“下拉菜单”）隐藏菜单等功能，具体请看代码 。
用JavaScript+CSS制作下拉菜单
Chien d'amis的博客
07-08 1836
用JavaScript+CSS制作下拉菜单 样例跳转：样例三<—点这跳转 HTML代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="./CSS/index3.css" rel="stylesheet" type="text/css"> <title>导航条</title> </h
html下拉框背景颜色,在JS事件里面怎么写CSS样式，修改下拉框选项的背景色
weixin_29977617的博客
06-03 1158
在JS事件里面怎么写CSS样式，修改下拉框选项的背景色，下拉框的颜色背景还是白色的，怎么写CSS样式获取类名更改下拉选项背景的颜色？setTimeout(function(){//以下修改文本控件、数字控件的属性$(".fr-texteditor").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置背景和字体颜色$(".fr-te...
select下拉菜单带图片
freejs
12-23 5760
非模拟select，而是真实的select选择，本例用到比较多的js和css，请到演示页面查看 演示     XML/HTML Code &lt;form&gt;          &lt;select name="test" class="themes"&gt;       &lt;option value="SelectBoxIt themes:" data...
【css】用css巧妙实现移动端横向滑动展示功能
汪小穆的博客
05-19 2万+
前言：记得以前处理移动端横向滑动展示都是去用js去解决的，要用js进行蛮多处理，要算li的宽度，然后还要用js设置ul盒子的宽度，又要设置最大滑动距离，最小滑动距离等等.......但是现在发现用css就能很好的解决这功能。   一、直接上代码。 &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
css 给select下拉框添加背景颜色
热门推荐
LittleUniverse
02-14 5万+
生成selected下拉框的html代码<!-- 添加css样式 --> <style type="text/css"> .blue { background-color:#0000FF; color:#FFF; } .red { background-color: #E20A0A; color: #ffffff; } .orange{ background-
纯CSS打造酷炫黑色三级下拉菜单
本示例中的代码实现了无需JavaScript，仅通过CSS就能创建的三级下拉菜单，具有酷黑的视觉风格，使得网站界面更加专业和时尚。下拉菜单的关键在于使用CSS选择器和伪类来控制不同层级菜单的显示和隐藏。 在提供的代码...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值