一款由css3和jquery落成的响应式设计导航,三级菜

时间:2019-08-29 00:15来源:亚洲城ca88唯一官方网站
通过html和css做出下拉导航栏的效果,css做出下拉导航栏 引用前请标明出处: 谢谢   通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计

通过html和css做出下拉导航栏的效果,css做出下拉导航栏

  引用前请标明出处: 谢谢

 

  通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果

  1.先设计出大体的框架

  

<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">设置</a>
<ul>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="#">更多产品</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
</ul>
</div>

  2.初始化样式,修改默认的无序列表

  

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}

 

  3.设置nav下的ul让其浮动,使列表处于同一水平线,同时设置li,a的样式

.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}

.nav ul li a{
color: #666;
}

 

  4.重要的一步之一,通过修改li下ul的display属性,使其没hover时隐藏,同时设置下拉框li的样式,使其更加自然

.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}

 

  5.hover到隐藏的ul时,修改其display属性,使其显示,同时使用position的absolute,使其显示自然

.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

样式全部代码:

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}
.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}
.nav ul li a{
color: #666;
}
.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

 

个人觉得有几点不足之处:

1.position的absolute属性对自适应有影响,但又想不出有什么方法可以使其显示正常,希望有大牛能够解决我的疑惑。

2.当然方法不止一种,也希望有多些朋友们能够提出其他思路,让我学习借鉴,谢谢!

引用前请标明出处: 谢谢 通过观察了百度的首页,对于更多...

一款由css3和jquery实现的响应式设计导航,css3jquery

2014年响应式设计成为设计主流。今天要给大家带来一款由css3和jquery实现的响应式设计导航。当显示器为pc时,导航为横条。当客户端为移动端时,呈现坚形导航。我们一起看下效果图:

亚洲城ca88唯一官方网站 1

 

在线预览   源码下载

 

实现的代码。

html代码:

亚洲城ca88唯一官方网站 2 <header> <nav id='cssmenu'> <div class="logo"> <a href="index.html">Responsive </a> </div> <div id="head-mobile"> </div> <div class="button"> </div> <ul> <li class='active'><a href='#'>HOME</a></li> <li><a href='#'>ABOUT</a></li> <li><a href='#'>PRODUCTS</a> <ul> <li><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>BIO</a></li> <li><a href='#'>VIDEO</a></li> <li><a href='#'>GALLERY</a></li> <li><a href='#'>CONTACT</a></li> </ul> </nav> </header> <section style='padding-top: 20px; font: bold 44px arial; color: #68D800; width: 970px; margin: auto;'> Responsive CSS3 Menu <br />Dropdown Submenus <br /> Width Toggle Animation <script src="/scripts/2bc/_gg_970_90.js" type="text/javascript"></script> </section> View Code

css3代码:

亚洲城ca88唯一官方网站 3 * { margin: 0; padding: 0; text-decoration: none; } body { background: #555; } header { position: relative; width: 100%; background: #333; } .logo { position: relative; z-index: 123; padding: 10px; font: 18px verdana; color: #6DDB07; float: left; width: 15%; } .logo a { color: #6DDB07; } nav { position: relative; width: 980px; margin: 0 auto; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #head-mobile { display: none; } #cssmenu { font-family: sans-serif; background: #333; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li > a { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #ddd; font-weight: 700; } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: #fff; } #cssmenu ul li.active:hover { background: #448D00; } #cssmenu > ul > li:hover, #cssmenu ul li.active { background: #448D00; -webkit-transition: background .3s ease; -ms-transition: background .3s ease; transition: background .3s ease; } #cssmenu > ul > li.has-sub > a { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu ul ul li:hover { } #cssmenu li:hover > ul { left: auto; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu ul ul li a { border-bottom: 1px solid rgba(150,150,150,0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400; background: #333; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #fff; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } #cssmenu ul ul li.has-sub > a:hover, #cssmenu ul li.has-sub ul li.has-sub ul li > a:hover { background: #363636; } @media screen and (max-width: 468px) { .logo { position: absolute; top: 0; left: 0; width: 100%; height: 46px; text-align: center; padding: 10px 0 0 0; float: none; } .logo2 { display: none; } nav { width: 100%; } #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu ul li { width: 100%; border-top: 1px solid #444; } #cssmenu ul li:hover { background: #363636; -webkit-transition: none; -ms-transition: none; transition: none; } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li a { padding-left: 25px; } #cssmenu ul ul li a { background: #333 !important; } #cssmenu ul ul li a:hover { background: #363636 !important; } #cssmenu ul ul ul li a { padding-left: 35px; } #cssmenu ul ul li a { color: #ddd; background: none; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a { color: #fff; } #cssmenu ul ul, #cssmenu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #head-mobile { display: block; padding: 23px; color: #ddd; font-size: 12px; font-weight: 700; } .button { width: 55px; height: 46px; position: absolute; right: 0; top: 0; cursor: pointer; z-index: 12399994; } .button:after { position: absolute; top: 22px; right: 20px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; } .button:before { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; position: absolute; top: 16px; right: 20px; display: block; height: 2px; width: 20px; background: #ddd; content: ''; } .button.menu-opened:after { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; top: 23px; border: 0; height: 2px; width: 19px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .button.menu-opened:before { top: 23px; background: #fff; width: 19px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid #444; height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #fff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } } View Code

js代码:

亚洲城ca88唯一官方网站 4 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ format: "dropdown", sticky: false }, options); return this.each(function () { $(this).find(".button").on('click', function () { $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.slideToggle().removeClass('open'); } else { mainmenu.slideToggle().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function () { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.find('.submenu-button').on('click', function () { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').slideToggle(); } else { $(this).siblings('ul').addClass('open').slideToggle(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function () { if ($(window).width() > 468) { cssmenu.find('ul').show(); } if ($(window).width() <= 468) { cssmenu.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function ($) { $(document).ready(function () { $("#cssmenu").menumaker({ format: "multitoggle" }); }); })(jQuery); //@ sourceURL=pen.js View Code

注:本文爱编程原创文章,转载请注明原文地址:

网页二级菜单制作的方式可以采用两种方式来实现,第一种使用纯CSS控制,第二种使用JavaScript CSS。下面分别用两种方式来实现二级菜单。

只有css3可以实现响应式设计?

要完美兼容,不可以,因为有时候要控制缩放,和布局更换的。不然市面上有那么多的CSS框架做什么。  

不管采用哪种方式来实现,基本的html元素是不变的。基本的html元素如下:

响应式web导航添加CSS3过渡动画为何不起作用?

你只是设置了transition的参数,没有设置怎么响应这个过度,以及过度的值!  

2014年响应式设计成为设计主流。今天要给大家带来一款由css3和jquery实现的响应式设计导...

<div id="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</div>

一、CSS实现二级菜单

使用一下的样式就可以实现二级菜单的显示:

      *{ margin:0px;padding:0px;}
     #menu{ background-color :#eee; width:600px; margin:0 auto; height:40px; }
     ul{ list-style:none;}
     ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
     a{ text-decoration:none;color:#000;display:block ;width:90px;}
     a:hover{color:#fff; background-color:#666;}
     ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
     ul li ul{ display:none; position:absolute; width:90px;}
     ul li ul li a:hover{ background-color:#06f;}
     ul li:hover ul{ display:block;}

其中注意的地方有:

1、*号代表所以有的元素;

2、line-height属性,可以设置文字垂直居中。原理:因为line-height代表的字的行高,如果父元素的高度为50px且padding值为0,字体设置为20px,line-height设置为30px,那么该文字在父容器中是居中,上面下面都有15px的留白,所以只要设置行高和父容器的行高一样那么文字就是垂直居中。当父容器太大的时候只需要包含文字的容器在中间显示,可以对包含文字的容器进行设置margin-top属性或者对父容器设置padding-top属性。

3、hover选择器与:之间不能有空格,养成良好的习惯,如果有空格,可能不会显示正确样式效果。

4、相对定位与绝对定位:

<div id="one">
    one
        <div id="two">
        two
            <div id="three">
                three
            </div>
        </div>
    </div>

css的控制代码如下:

    div{  margin-left:0px;}
    #one{ height:500px; border:1px solid red; width:500px; position:relative}
    #two{ height:300px; border:1px solid blue; width:300px; margin :0px; position :relative }
     #three{ height:100px; border:1px solid black ; width:100px;position :absolute;top:50px left:20px }

亚洲城ca88唯一官方网站,其中#three设置的是绝对定位,那么当他的上级容器没有设置为相对定位的时候,那么#three就是相对浏览器的左上角定位,否则#three就相对于上级容器定位。在该实例中,#three是相对于#two进行绝对定位的,如果#two没有进行相对定位,那么#three就是相对于#one进行绝对定位。如果#three的上级元素都有相对定位的话,那么就相对于距离其最近的上级元素进行绝对定位。在我的感觉中相对定位是配合绝对定位使用,其中绝对定位的元素不属于文档流中的一部分。

在进行绝对定位的时候用top、left、right、bottom来指定相对上级元素的位置,但是如果不设置top、left、right、bottom元素,而是设置margin又会是不一样的效果。将#three的中的top和left属性去掉,加上margin-top和margin-left会使得#three相对自己本身的位置进行左上偏离,至于本来的位置在哪里,可以根据在可视化工具中去查看。

二、JavaScript CSS实现二级菜单

使用下列的样式和JavaScript脚本:

  <style type="text/css">
     *{ margin:0px;padding:0px;}
     #menu{ background-color :#eee; width:600px; height:40px; margin:0 auto;}
     ul{ list-style:none;}
     ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
     a{ text-decoration:none;color:#000;display:block ;width:90px;}
     a:hover{color:#fff; background-color:#666;}
     ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
     ul li ul{ display:none; position:absolute; width:90px;}

    </style>
    <script type="text/javascript">
        function show(li) {
            var submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "block";
        }
        function hide(li) {
            var submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "none";
        }
    </script>

其中注意的地方有:

1、document.getElementsByTagName("tagname")函数返回的是在document文档中返回tagname标签数组。当然每个对象都可以使用getElementsByTagName的方法,不同的对象使用该方法只能从该对象的下级元素中去搜索tagname标签。

二、CSS三级菜单的实现

三级菜单的实现和二级菜单是一样的原理,其核心是利用三级菜单相对于二级的绝对定位。其中定位属性有继承的效果。


一切情绪皆痛苦,没有什么情绪是快乐的。

编辑:亚洲城ca88唯一官方网站 本文来源:一款由css3和jquery落成的响应式设计导航,三级菜

关键词: 亚洲城ca88