响应下拉式菜单

Gemini 发布于2019-08-29 16:06 / 2172人阅读

摘要：一简介响应式下拉菜单可在多个移动端显示会有不同的效果。二代码如下响应式下拉菜单第三效果图如下这是视口大于的时候所显示的内容端这是视口小于的时候所显示的内容手机这是在手机上和上的效果图

一、简介

响应式下拉菜单可在多个移动端显示会有不同的效果。

二、代码如下

body{

margin:0;

}
.nav{

width:100%;
background-color:#00316b;
position:relative;

}
ul{

padding:0px;
margin:0px;
width:80%;
margin:0 auto;
background:#00316b;

}
ul>li{

list-style:none;
float:left;

}
ul>li>a{

color:#fff;
text-decoration:none;
display:block;
padding:20px 30px;

}
ul>li:hover{

background-color:red;

}
.clearfix:after{

display:block;
content:"";
height:0px;
visibility:hidden;
clear:both;

}
.clearfix{

zoom:1;

}
.toggle{

text-align:right;
color:#fff;
padding:20px;
font-size:20px;
background:black;
/* background-color:#001r44; */
display:none;
overflow:hidden;

}
.tu{

float:left;

}
.bb{

position:absolute;
background-image:url(shitu2.png);
background-repeat:no-repeat;
background-size:100px;
width:100px;
height:40px;
left:20px;
top:10px;

}



----------
body{
    margin:0;
}
.nav{
    width:100%;
    background-color:#00316b;

}
ul{
    padding:0px;
    margin:0px;
    width:100%;
    margin:0 auto;
    background:#00316b;
}
ul>li{
    text-align:center;
    list-style:none;
    /* float:left; */
}
ul>li>a{
    color:#fff;
    text-decoration:none;
    display:block;
    padding:20px 30px;
}
ul>li:hover{
    background-color:red;
}
.clearfix:after{
    display:block;
    content:"";
    height:0px;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1;
}
.toggle{
    text-align:right;
    color:#fff;
    padding:20px;
    background:yellow;
    font-size:20px;
    overflow:hidden;
    display:block;
}

.tu{
    float:left;
    width:100px;
}

第三、效果图如下

这是视口大于1024px的时候所显示的内容
min-width:1024px

这是视口小于1024px的时候所显示的内容<手机>
max-width:1024px
这是在手机上和iPad上的效果图

GPU云服务器云服务器 jq响应式菜单响应式响应式布局响应式网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113530.html

响应下拉式菜单

摘要：一简介响应式下拉菜单可在多个移动端显示会有不同的效果。二代码如下响应式下拉菜单第三效果图如下这是视口大于的时候所显示的内容端这是视口小于的时候所显示的内容手机这是在手机上和上的效果图一、简介响应式下拉菜单可在多个移动端显示会有不同的效果。二、代码如下响应式下拉菜单 ...

王陆宽 2019-08-02 10:59 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0