沃梦达 / 编程技术 / 前端开发 / 正文

用CSS打造抽屉菜单

沃梦达教程前端开发

2022-11-04

用CSS打造抽屉菜单

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">         <head>                 <title>宜广宣传广告 </title>                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                 <meta name="title" content="" />                 <meta name="author" content="" />                 <meta name="subject" content="" />                 <meta name="language" content="en" />                 <meta name="keywords" content="" />     <style type="text/css">    #leftside{ float:left; background-color:#00468C; width:150px; margin:0 auto; text-align:center; padding:10px 0;}      #leftside.show_about p.about{ display:block;}      #leftside.meta p.meta{ display:block; }      #leftside.ads p.ads{ display:block;}      #leftside a{ display:block;}            #leftside a{ text-decoration:none; color:black;}            #leftside a:hover{ background:#FFD7EB url(images/common/bb_url.gif) no-repeat 10px center; }            #leftside .class1 a:hover{ background:#FFD7EB url(images/common/bb_url.gif) no-repeat 10px center;}    p.top{ background-color:#F9E006; line-height:2;}    p.normal{ background:#8CC6FF url(images/common/bb_url.gif) no-repeat 10px center; margin:10px; font:16px/1.5 宋体; }    p.about,p.meta,p.ads{ display:none;}    .class1{ display:block; margin:10px 20px; background:#fff url(images/common/bb_url.gif) no-repeat 10px center; font:14px/1.5 宋体;}                                    </head>                             <body onload="">          <div id="leftside">                    <p class="top"> </p>            <p class="normal">首页</p>            <p class="normal" onclick="shq.$('leftside').className=shq.$('leftside').className==''?'show_about':''">关于宣广</p>                                        <p class="about class1">公司介绍</p>                    <p class="about class1">宣广结构</p>                    <p class="about class1">宣广优势</p>                    <p class="about class1">宣广历程</p>                    <p class="about class1">宣广荣誉</p>                    <p class="about class1">宣广团队</p>                    <p class="about class1">文化交流</p>                                <p class="normal">公司新闻</p>            <p class="normal">服务项目</p>            <p class="normal" onclick="shq.$('leftside').className=shq.$('leftside').className==''?'meta':''">宣广媒介</p>                                        <p class="meta class1">独家媒体</p>                    <p class="meta class1">其它媒体</p>                    <p class="meta class1">快客车载</p>                    <p class="meta class1">户外发布</p>                                        <p class="normal" onclick="shq.$('leftside').className=shq.$('leftside').className==''?'ads':''">成功客户</p>                                         <p class="ads class1">客户商标</p>                    <p class="ads class1">成功案例</p>                                        <p class="normal">人才招聘</p>                    <p class="normal">联系我们</p>                               </div>              <div id="right">                  </div>                 </body>                  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

沃梦达教程

本文标题为：用CSS打造抽屉菜单

上一篇：字节跳动、抖音小程序如何获取授权用户信息

下一篇：我的一些关于web标准的思考笔记（一）

基础教程推荐

学习Bootstrap5

猜你喜欢

第7天:CSS入门 2022-11-04
分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
vue的 Mixins (混入) 2023-10-08
Vue+WebSocket实现在线聊天 2023-10-08
深入浅析Jsonp解决ajax跨域问题 2022-12-28
关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
ECSHOP中实现ajax弹窗登录功能 2023-01-31