2015.3.14(知乎首页仿写及纯CSS兼容IE6实现响应式下拉菜单)

昨晚写了一个知乎的首页练习,只完成了上半部分的练习。下半部分做了一个纯CSS的响应式下拉菜单(可以兼容IE6)。

可以看出那个知乎两个大字下面的那行字是截图截下来的,有一点色差……代码如下:

js的部分只用到了获取可视区域的宽度这一点。

function setIndex() {
var commonWidth = $(window).outerWidith;
var commonWidth = $(window).outerHeight;
$(".backTitle").css("width" commonWidth);
}

html部分的代码:

CSS部分的主要下拉菜单的核心代码:

纯CSS的响应式下拉菜单这个主要用到了CSS的visibility属性。还实验了另外一种HTML5+CSS3的响应式下拉菜单。但如果网页用到HTML5和CSS3,是不是就不用考虑低版本的浏览器了呢?

还是先判断是哪一种浏览器,然后为每一个浏览器不兼容的特性找到一个解决办法,低版本浏览器就抛掉或者提示用户升级?

这个下拉式菜单做的并不满意,好像是菜单主选区(大标题)与下拉菜单的布局问题。感觉还是不然。是不是和clear:both属性有关呢?

写了和删除效果没什么改变,我就删了……

时间: 2024-10-15 20:15:46

2015.3.14(知乎首页仿写及纯CSS兼容IE6实现响应式下拉菜单)的相关文章

Android自定义控件:仿美团下拉菜单及相关代码优化

背景 最近的项目中用到了类似美团中的下拉多选菜单,在实际开发过程中,也发现了一些问题,主要归纳如下: 1.当菜单较为复杂时,如果不能设计好代码逻辑,将造成控件难于维护 2.美团菜单可以连续点击顶部tab,切换不同菜单,而我使用的popupWindow似乎在展开一个菜单时点击其他tab,菜单就会收回. 本文将针对如上两个问题进行一些讨论,最终给出较为合理的解决方案. 程序结构 由于菜单涉及多级多项,如果把UI和其他逻辑堆在一起写,必然会造成代码过于庞大,甚至没有办法扩展,更谈不上及时变更需求. V

MDNavBarView下拉导航菜单(仿美团导航下拉菜单)

说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下,感觉挺不错的,复用性也比较好,但要 是换成别的样式就要去修改代码了,感觉这有点不方便也比较容易出错.于是参照他的大致思路写了一个仿下拉菜单. 具体的实现就不多说了,觉得有意思的话可以下来看看.下面说一下使用方法吧: 1.添加navbarview包下的代码与对应资源 2.布局文件中添加: <com.m

新浪微博客户端(6)-创建首页下拉菜单

创建首页下拉菜单,本节先完成下拉菜单界面的创建,下节再微调其位置. DJDropdownMenu.h #import <UIKit/UIKit.h> @interface DJDropdownMenu : UIView /** 构造方法 */ + (instancetype)menu; /** 显示 */ - (void)show; /** 消失 */ - (void)dismiss; @property (nonatomic,weak) UIView *contentView; @prope

一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形选择45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{

解决phpcms模版设置中不能显示栏目首页模板,栏目列表页模板,内容页模板等下拉菜单选项的问题!

第1步:检查相应的模版文件夹中是否有模版文件 一般地,查看目录phpcms/templates/default[模板风格标识]/content 栏目首页模板:以(category_)开头,category_xxx 栏目列表页模板:以(list_)开头,list_xxx 内容页模板:以(show_)开头,show_xxx 如果模板文件存在,看第二步. 第2步:查看文件夹中的模板文件是否包含了中文 例如:category - 副本.html 注意模板文件名不能有中文,因为在后台模板设置中获取模板文件

jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下jQuery的简单快速的神奇之处. 学完本章,可以书写最常见的下拉菜单写法. 案例1 效果如图所示: 在书写这个滑动的下拉菜单的时候,我们首先来认识下jQuery里面的滑动方法 :slideToggle() slideToggle(执行时间,运动方式,返回函数) 执行时间: 常用的是 "slow&qu

仿QQ下拉菜单

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content=""><script src="http://libs.baidu.com/jquery/1

JS+CSS打造仿QQ面板的三级折叠下拉菜单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造仿QQ面板的三级折叠下拉菜单-石家庄地毯</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0p

CSS+JS仿QQ面板风格的多级折叠下拉菜单

<html> <head> <title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{ font-size:12px; color:#333;text-align:center;} .mbox{background:#73C2FF; wid