收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1271|回复: 1

[jquery] 自适应菜单

[复制链接]
发表于 2015-3-11 16:56:13 | 显示全部楼层 |阅读模式
本帖最后由 ptliko 于 2015-3-11 17:00 编辑

网上下载了一个自适应的菜单,在没有点击菜单时,只要鼠标悬停就能显示子菜单,但点击之后,悬停显示的效果就没有了,
高手帮忙修改成这样的效果:只要是悬停菜单上只显示出子菜单,但是当页面宽度小于800PX时仍然保留点击显示和点击隐藏。附件是下载的源文件
谢谢。
怎么不能添加附件???只能贴上代码
//////////////CSS////////////////////
* {
        padding:0;
        margin:0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

body {background:#FEFEFE;}

.menu_bar {
        display:none;
}

header {
        width: 100%;
}

header nav {
        background:#023859;
        z-index:1000;
        max-width: 1000px;
        width:95%;
        margin:20px auto;
}

header nav ul {
        list-style:none;
}

header nav ul li {
        display:inline-block;
        position: relative;
}

header nav ul li:hover {
        background:#E6344A;
}

header nav ul li a {
        color:#fff;
        display:block;
        text-decoration:none;
        padding: 20px;
}

header nav ul li a span {
        margin-right:10px;
}

header nav ul li:hover .children {
        display:block;
}

header nav ul li .children {
        display: none;
        background:#011826;
        position: absolute;
        width: 150%;
        z-index:1000;
}

header nav ul li .children li {
        display:block;
        overflow: hidden;
        border-bottom: 1px solid rgba(255,255,255,.5);
}

header nav ul li .children li a {
        display: block;
}

header nav ul li .children li a span {
        float: right;
        position: relative;
        top:3px;
        margin-right:0;
        margin-left:10px;
}

header nav ul li .caret {
        position: relative;
        top:3px;
        margin-left:10px;
        margin-right:0px;
}

@media screen and (max-width: 800px) {
        body {
                padding-top:80px;
        }

        .menu_bar {
                display:block;
                width:100%;
                position: fixed;
                top:0;
                background:#E6344A;
        }

        .menu_bar .bt-menu {
                display: block;
                padding: 20px;
                color: #fff;
                overflow: hidden;
                font-size: 25px;
                font-weight: bold;
                text-decoration: none;
        }

        .menu_bar span {
                float: right;
                font-size: 40px;
        }

        header nav {
                width: 80%;
                height: calc(100% - 80px);
                position: fixed;
                right:100%;
                margin: 0;
                overflow: scroll;
        }

        header nav ul li {
                display: block;
                border-bottom:1px solid rgba(255,255,255,.5);
        }

        header nav ul li a {
                display: block;
        }

        header nav ul li:hover .children {
                display: none;
        }

        header nav ul li .children {
                width: 100%;
                position: relative;
        }

        header nav ul li .children li a {
                margin-left:20px;
        }

        header nav ul li .caret {
                float: right;
        }
}

/////////HMTL///////////
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="fonts.css">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="main.js"></script>
<title>无标题文档</title>
</head>

<body>
<header>
                <div class="menu_bar">
                        <a href="#" class="bt-menu"><span class="icon-list2"></span>Menú</a>
                </div>

                <nav>
                        <ul>
                                <li><a href="#"><span class="icon-house"></span>Inicio</a></li>
                                <li><a href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
                                <li class="submenu">
                                        <a href="#"><span class="icon-rocket"></span>Proyectos<span class="caret icon-arrow-down6"></span></a>
                                        <ul class="children">
                                                <li><a href="#">SubElemento #1 <span class="icon-dot"></span></a></li>
                                                <li><a href="#">SubElemento #2 <span class="icon-dot"></span></a></li>
                                                <li><a href="#">SubElemento #3 <span class="icon-dot"></span></a></li>
                                        </ul>
                                </li>
                                <li><a href="#"><span class="icon-earth"></span>Servicios</a></li>
                                <li><a href="#"><span class="icon-mail"></span>Contacto</a></li>
                        </ul>
                </nav>
        </header>
</body>
</html>

////////////JS/////////
// JavaScript Document
$(document).ready(main);

var contador = 1;

function main () {
        $('.menu_bar').click(function(){
                if (contador == 1) {
                        $('nav').animate({
                                left: '0'
                        });
                        contador = 0;
                } else {
                        contador = 1;
                        $('nav').animate({
                                left: '-100%'
                        });
                }
        });

        // Mostramos y ocultamos submenus
        $('.submenu').click(function(){
                $(this).children('.children').slideToggle();
        });
}
发表于 2015-3-20 14:08:23 | 显示全部楼层
不明白,小于800,多是手机或者平板,肯定会改变菜单风格,否则干嘛用响应式菜单,请把问题描述清楚。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-5-25 09:34 , Processed in 0.109098 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表