用CSS打造 抽屉菜单

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

宜广宣传广告

#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 宋体;}

首页

关于宣广

公司介绍

宣广结构

宣广优势

宣广历程

宣广荣誉

宣广团队

文化交流

公司新闻

服务项目

宣广媒介

独家媒体

其它媒体

快客车载

户外发布

成功客户

客户商标

成功案例

人才招聘

联系我们

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享

    Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享

    SlidingDrawer效果想必大家也见到过,它就是1.5模拟器上进入应用程序列表的效果.下面是截图 一.简介  SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一 是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局,在布局文件中必须指定handle和content.例如下面 复制代码 代码如下: <SlidingDrawer android:layout_width="fill_

  • android UI进阶之android中隐藏的layout 抽屉的使用方法

    android UI进阶之android中隐藏的layout 抽屉的使用方法

    最近在写一个应用,想把设置页面和应用页面放在一起,这样就能实现用户可以实时看到自己的设置对UI的影响,从而更方便的设置用户喜欢的界面.想了一段时间,发现用slidingDrawer这个控件可以实现这个效果.也就是一个抽屉.拉开抽屉,占据半个屏幕,另外半个屏幕还是显示应用页面.效果还是不错的. 今天就和大家分享一下android中这个抽屉效果.其实在android的lanucher就是一个抽屉,打开它就可以看到安装的应用.相信大家都见过用过.下面我们就来做个相同的效果,当然只是UI上差不多相同的效

  • Android提高之多方向抽屉实现方法

    Android提高之多方向抽屉实现方法

    说起在android上要实现类似Launch的抽屉效果,大家一定首先会想起SlidingDrawer.SlidingDrawer是android官方控件之一,但是本文的主角并不是它,而是民间的控件工具集合:android-misc-widgets.android-misc-widgets里面包含几个widget:Panel.SmoothButton.Switcher.VirtualKeyboard,还有一些动画特效,本文主要介绍抽屉容器Panel的用法.android-misc-widgets的

  • iOS实现简单的抽屉效果

    iOS实现简单的抽屉效果

    说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P

  • javascript 简单抽屉效果的实现代码

    css 复制代码 代码如下: <style type="text/css"> #bodycontainer { height: 66px; } #leftcontainer { background-color: #C5C5C5; float: left; border: 1px solid #C5C5C5; } </style> aspx: 复制代码 代码如下: <div id="bodycontainer"> <div

  • JS实现带有抽屉效果的产品类网站多级导航菜单代码

    JS实现带有抽屉效果的产品类网站多级导航菜单代码

    本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具

  • Android SlidingDrawer 抽屉效果的实现

    Android SlidingDrawer 抽屉效果的实现

    SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局,在布局文件中必须指定handle和content. 1.布局layou文件 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_w

  • iOS开发之路--仿网易抽屉效果

    iOS开发之路--仿网易抽屉效果

    最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD

  • 用CSS打造 抽屉菜单

    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 宜广宣传广告 #leftside{ float:left; background-color:#00468C; width:150px; margin:0 auto; text-align:center; padding:10px 0;} #leftside.show_about p.about{

  • 小程序原生实现左滑抽屉菜单

    小程序原生实现左滑抽屉菜单

    目录 WXS 响应事件 方案A 页面结构和样式 WXS 事件回调函数 WXS 脚本 遮罩层 方案B 为什么要使用 WXS 结语 & 参考资料 参考资料: 在移动端,侧滑菜单是一个很常用的组件(通常称作 Drawer,抽屉).因为现在手机屏幕太大,点击角落的菜单按钮明显不如在屏幕中间滑动方便. 相比其他平台,小程序的组件库支持明显还不够完善,各个框架也还不太成熟.由于之前使用框架的过程中被各种神秘bug搞的头秃,还是用回了原生环境. 最近研究了一下如何在原生框架中实现滑动抽屉菜单效果,本来以为很麻

  • vue移动端时弹出侧边抽屉菜单效果

    vue移动端时弹出侧边抽屉菜单效果

    效果图: aside.vue: <template> <div class="aside"> <div style=" height: 60px; background-color: #2e6baa; line-height: 60px; display: flex; align-items: center; justify-content: center; " > <img src="https://lj-com

  • JS+CSS简单树形菜单实现方法

    JS+CSS简单树形菜单实现方法

    本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下

  • 超强推荐CSS打造经典鼠标触发显示选项

    css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>> 高级搜索 分类搜索 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 微信小程序实战之自定义抽屉菜单（7）

    微信小程序实战之自定义抽屉菜单（7）

    微信提供了动画api,就是下面这个 相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject 通过使用这个创建动画的api,可以做出很多特效出来 下面介绍一个抽屉菜单的案例 实现代码: wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-sta

  • 用CSS打造多彩文字链接

    CSS打造多彩文字链接 td { font-size : 12px; font-family : 宋体; } a { font-family: "宋体"; font-size: 9pt; text-decoration: none} .t1{ color: #CC0000;text-decoration: underline } .t2{ text-decoration : none; color:#006699; } .t3 { color: #006600; text-decora

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

  • js+css实现tab菜单切换效果的方法

    本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * {      margin: 0px;      padding: 0px;  }  body {      width: 600px;      margin: 0 auto;      background-color: silver;  }    #contanier {      background-color: yellow;     

随机推荐