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

用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标准的思考笔记（一）

猜你喜欢

基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
vue keep-alive 2023-10-08
javascript 判断当前浏览器版本并判断ie版本 2023-08-08
jsPlumb+vue创建字段映射关系 2023-10-08
ajax实现输入提示效果 2023-02-14
深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
关于 html：如何从 css 表中删除边距和填充 2022-09-21
layui数据表格以及传数据方式 2022-12-13
JS实现左侧菜单工具栏 2022-08-31
1 Vue - 简介 2023-10-08