使用HTML+CSS+JS制作简单的网页菜单界面

2024-04-02 18:20:02

写ABROAD项目用到了标签这个东东，其实标签在WEB上到处可见，图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样，不过checkbox实在太丑了，就使用这个简单方法美化一下好了。

1、HTML代码：

<span class="tags">
  <span>经济、金融类</span>
  <span>行政、人资类</span>
  <span class="active">市场、销售类</span>
  <span>电子工程IT类</span>
  <span class="active">工程类</span>
  <span>生物医药类</span>
  <span>物理、化学类</span>
  <span>广告、传媒类</span>
  <span>语言、翻译类</span>
</span>

2、CSS代码（颜色、字体大小、间距自行调整）：

/* 标签样式 */
.tags span {
  font: 12px/22px 'Microsoft Yahei',Arial,Lucida Grande,Tahoma;
  border: 1px #E3E0D9 solid;
  display: inline-block;
  height: 20px;
  background: #FFF;
  text-align: center;
  padding: 2px 7px;
  margin: 1px 4px;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  overflow: hidden;
  color: #989898;
}
.tags span:hover {
  border-color: #00956d;
}
.tags span.active {
  color: #FFF;
  border-color: #00956d;
  background-color: #00956d;
}

3、JS代码（代码也是根据自己的需求提取数据；原谅我放荡不羁使用了jquery库~）：

// 绑定标签点击事件 @ 2014-01-29 21:57:26
$('.tags span').on('click', function(){
  $(this).toggleClass('active');
});

// 读取标签数据时 @ 2014-01-29 23:12:35
var tag_content = ',';
$('.tags span').each(function(k, v) {
  if($(v).hasClass('active')){
    tag_content += $(v).text()+',';
  }
});
if( tag_content==',' ){
  alert('请至少选择一个专业标签');
  return;
}

js+html5绘制图片到canvas的方法

本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor
js+html5实现可在手机上玩的拼图游戏

本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc
js+HTML5实现视频截图的方法

本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击"运行代码"后的效果,使用时,你只需将需要运行的HTML代码拷贝到文本框内,点击对应的功能按钮即可. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE>直接页面显示器</TITLE> <STYLE type=&q
js+HTML5基于过滤器从摄像头中捕获视频的方法

本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div> <div class="container"> &l
js实现局部页面打印预览原理及示例代码

最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单.就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什么.我这里就写  需要打印的内容 . 因为标记是不需要让用户看见的所以加了注释!具体实现代码如下: <!DOCTYPE html> <html> <head> <title>打印预览简单实现</title&g
js 本地预览的简单实现方法

复制代码代码如下: // JavaScript Documenteval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=func
添加、删除HTML结点 & 上传图片预览

1.添加.删除HTML结点 2.上传图片预览添加.删除HTML结点 & 上传图片预览删除删除增加附件图片预览: [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
JS上传图片前实现图片预览效果的方法

本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met
使用HTML+CSS+JS制作简单的网页菜单界面

写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器.ABROAD后台添加数据.百度图片搜索.sf发布博客文章时贴标签的样式--标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了. 1.HTML代码: <span class="tags"> <span>经济.金融类</span> <span>行政.人资类</span> <
利用css+原生js制作简单的钟表

利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
Node.js 利用cheerio制作简单的网页爬虫示例

本文介绍了Node.js 利用cheerio制作简单的网页爬虫示例,分享给大家,具有如下: 1. 目标完成对网站的标题信息获取将获取到的信息输出在一个新文件工具: cheerio,使用npm下载npm install cheerio cheerio的API使用方法和jQuery的使用方法基本一致如果熟练使用jQuery,那么cheerio将会很快上手 2. 代码部分介绍: 获取segment fault页面的列表标题,将获取到的标题列表编号,最终输出到pageTitle.txt文件里
Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法

这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮解决了: 1.可以遮挡ie6下的select元素但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

1.简单介绍在学习完HTML.CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增.删.改.查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧. 2.运行截图往输入框里输入内容: 进行添加后默认添加到未完成一栏: 将刚刚添加的事项进行修改: 修改成功: 将修改成功后的事项设置成已完成: 对"干饭"."睡觉"进
利用pixi.js制作简单的跑酷小游戏

目录前言项目地址 demo地址初始化项目主要逻辑 useParkour useScene useHurdle Player 前言此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw
JavaScript+CSS实现仿天猫侧边网页菜单效果

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st
js实现简单的联动菜单效果

本文实例讲述了js实现简单的联动菜单效果.分享给大家供大家参考.具体如下: 这是一个最简单的js联动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉修改也可以.网页上常用到一种Select联动菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ld-menu-codes/ 具体代码如下: <html> <head> <title>简单的Select联动菜单代码</ti
CSS+jQuery实现简单的折叠菜单

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>折叠菜单</title> <style> body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ display:n
JS实现简单短信验证码界面

1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时. 2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作.同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送. 3.倒计时结束后,清除计时器,并使文字改变为"重新发送验证码",恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时. <head> <meta charset="UTF-

使用HTML+CSS+JS制作简单的网页菜单界面

相关推荐

随机推荐