一个炫酷的导航菜单，模仿别人写的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/beyond.css" />
<title>beyond网站模板练习</title>
</head>
<body>
<!-- 导航 -->
<div class="page-sidebar">
    <ul class="nav panel-group sidebar-menu" id="nav_parent">
        <li class="panel">
            <a href="#">
                <i class="menu-icon glyphicon glyphicon-home"></i>
                <span class="menu-text"> Dashboard </span>
            </a>
        </li>
        <li class="panel">
            <a class="panel-heading collapsed" href="#collapse1" data-toggle="collapse" data-parent="#nav_parent">
                <i class="menu-icon glyphicon glyphicon-fire"></i>
                <span class="menu-text">Elements</span>
                <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
            </a>
            <ul class="nav submenu collapse" id="collapse1">
                <li>
                    <a href="#"><span class="menu-text">Basic Elements</span></a>
                </li>
                <li>
                    <a class="panel-heading collapsed" href="#collapse2" data-toggle="collapse">
                        <span class="menu-text">Icons</span>
                        <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
                    </a>
                    <ul class="nav submenu collapse" id="collapse2">
                        <li>
                            <a href="#">
                                <i class="menu-icon glyphicon glyphicon-stats"></i>
                                <span class="menu-text">Font Awesome</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="menu-icon glyphicon glyphicon-stats"></i>
                                <span class="menu-text">Glyph Icons</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <span class="menu-text">Tabs &amp; Accordions</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="menu-text">Alerts &amp; Tooltips</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="menu-text">Modals &amp; Wells</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="panel">
            <a class="panel-heading collapsed" href="#collapse5" data-toggle="collapse" data-parent="#nav_parent">
                <i class="menu-icon glyphicon glyphicon-link"></i>
                <span class="menu-text">More Pages</span>
                <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
            </a>
            <ul class="nav submenu collapse" id="collapse5">
                <li>
                    <a href="#"><span class="menu-text">Error 404</span></a>
                </li>
                <li>
                    <a href="#"><span class="menu-text"> Grid</span></a>
                </li>
                <li>
                    <a class="panel-heading collapsed" href="#collapse6" data-toggle="collapse">
                        <span class="menu-text">Multi Level Menu</span>
                        <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
                    </a>
                    <ul class="nav submenu collapse" id="collapse6">
                        <li>
                            <a href="#">
                               <i class="menu-icon glyphicon glyphicon-stats"></i>
                                <span class="menu-text">Level 3</span>
                            </a>
                        </li>
                        <li>
                            <a class="panel-heading collapsed" href="#collapse7" data-toggle="collapse">
                                <i class="menu-icon glyphicon glyphicon-stats"></i>
                                <span class="menu-text">Level 4</span>
                                <i class="glyphicon glyphicon-chevron-right menu-expand"></i>
                            </a>
                            <ul class="nav submenu collapse" id="collapse7">
                                <li>
                                    <a href="#">
                                        <i class="menu-icon glyphicon glyphicon-stats"></i>
                                        <span class="menu-text">Some Item</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                       <i class="menu-icon glyphicon glyphicon-stats"></i>
                                        <span class="menu-text">Another Item</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
    //点击菜单箭头变化
    $(".page-sidebar .sidebar-menu a").each(function(){
        $(this).click(function(){
            var Oele = $(this).children(‘.menu-expand‘);
            if($(Oele)){
                if($(Oele).hasClass(‘glyphicon-chevron-right‘)){
                    $(Oele).removeClass(‘glyphicon-chevron-right‘).addClass(‘glyphicon-chevron-down‘);
                }else{
                    $(Oele).removeClass(‘glyphicon-chevron-down‘).addClass(‘glyphicon-chevron-right‘);
                }
            }

            //选中增加active
            if(! $(this).hasClass(‘panel-heading‘)){
                $(".page-sidebar .sidebar-menu a").removeClass(‘active‘);
                $(this).addClass(‘active‘);
            }
        });
    });
})
</script>
</body>
</html>

css代码:

.page-sidebar{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 224px;
    display: block;
}
.page-sidebar .sidebar-menu {
    margin: 0;
    padding: 0;
    margin-left: 5px;
}
.page-sidebar:before{
    content: "";
    position: fixed;
    display: block;
    width: 219px;
    bottom: 0;
    top: 0;
    left: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    z-index: 1;
}
.page-sidebar .sidebar-menu a{
    color: #737373;
    z-index: 123;
    padding: 0 16px 0 7px;
    margin: 0;
    height: 38px;
    line-height: 36px;
    -webkit-text-shadow: none!important;
    text-shadow: none!important;
    font-size: 13px;
}
.page-sidebar .submenu{
    margin: 0;
    padding: 0;
    position: relative;
    float: none;
    background-color: #fbfbfb;
    border: 0;
    box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15);
    border-radius: 0;
    z-index: 123;
}
.page-sidebar .sidebar-menu>li>a {
    border-top: 1px solid #f3f3f3;
}

/* 菜单前面的小图标*/
.page-sidebar .sidebar-menu a .menu-icon {
    display: inline-block;
    vertical-align: middle;
    min-width: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    margin-top: -3px;
}

/* 向右的箭头*/
.page-sidebar .sidebar-menu a .menu-expand{
    display: inline-block;
    position: absolute;
    font-size: 10px;
    line-height: 10px;
    height: 10px;
    width: 10px;
    right: 12px;
    top: 15px;
    margin: 0;
    text-align: center;
    padding: 0;
    -webkit-text-shadow: none;
    text-shadow: none;
    color: #666;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    font-style: normal;
    font-weight: normal;
}
.panel-group .panel{
    margin: 0;
    margin-top:0 !important;
    border: none;
}

/* 第一层级缩进 */
.page-sidebar .sidebar-menu .submenu>li>a {
    padding-left: 40px;
}
/* 第二层级缩进 */
.page-sidebar .sidebar-menu .submenu>li .submenu>li>a {
    padding-left: 50px;
}
.page-sidebar .sidebar-menu a:hover {
    color: #262626;
}
/* 选中增加蓝色border */
.page-sidebar .sidebar-menu .active:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 4px;
    max-width: 4px;
    overflow: hidden;
    background-color: #2dc3e8;
}
.page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 4px;
    max-width: 4px;
    overflow: hidden;
    background-color: #fb6e52;
}

效果图：

点击菜单的箭头有点小问题，后面改，不是很影响。

时间： 2024-12-22 10:54:13

一个炫酷的导航菜单，模仿别人写的的相关文章

来一个炫酷的导航条

本文分享一个带动画效果的中英文切换导航条. 鼠标放上去试一下: a:hover { margin-top: -40px } INDEX 首页 BBS 社区 HOME 我 1.用CSS3实现效果看上去复杂,其实我们先来做出一个样式,就很简单了.如下: 代码: <nav> <ul class="list"> <li> <a href="#"> <b>INDEX</b> <i>首页<

炫酷弹出菜单这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu 这里改造成了Swift版,效果图如下: 使用代码: 1 import UIKit 2 3 class ViewController: UIViewController,HanggeSwiftMenuDelegate { 4 5 override func viewDidLoad() { 6 super

一款基jquery超炫的动画导航菜单

今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览源码下载实现的代码. html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2

Android 从无到有打造一个炫酷的进度条效果

从无到有打造一个炫酷的进度条效果

一个炫酷的Actionbar效果

今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示大图片,如果用户滚动页面需要查看内容的时候,则大图收缩到 ActionBar 中. 源码下载:http://files.cnblogs.com/sage-blog/notboringactionbar.zip 参考:http://flavienlaurent.com/blog/2013/11/20/

利用UIWebView打造一个炫酷的视频背景视图（OC & Swift）

http://www.cocoachina.com/ios/20151023/13860.html 2015-10-6更新:适配 Swift2.0 如有需要,可以通过[email protected]发私信或联系我. 注:使用GIF动态图片只是一种可行的方式达到该效果,并非唯一解决方案.我个人更倾向于通过视频播放器的方式来实现视频背景效果,然而通过GIF图片仍然是一个可行的选项.实施步骤直接跳转到下面的"工作前准备". 如果你使用过iOS版本的Spotify ,你会注意到在这款应用的新

【无私分享】干货！！！一个炫酷的自定义日历控件，摆脱日历时间选择烦恼，纯福利~

最近公司项目中有一个按日期查看信息的功能,楼主本想用之前用的wheelView将就使用的,不过产品经理有个新要求,就是点击按钮弹出的日期选择对话框必须显示农历节假日,周几什么的.这可就难为人了,倘若使用之前的滚动时间选择器,无疑是难以实现的,楼主辗转反侧,冥思苦想,却不得正果. 好吧,去网上下了几个OA系统一用就有了idea,突然想到手机自带的日历~~,oh,year,日历就有这功能,瞧瞧,我靠,这个东西,咋做. 仔细一瞧,似乎用GridView可以实现,额,二话不说就开干.折腾了半天都没弄好,

HTML5 SVG和CSS3炫酷液态菜单按钮特效

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效.该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样. 效果演示:http://www.htmleaf.com/Demo/201504081648.html 下载地址:http://www.htmleaf.com/html5/SVG/201504081647.html

炫酷的底部菜单栏BottomBar

开源项目分析BottomBar 今天分析一个炫酷的底部菜单栏开源项目,先说明下用法,再分析一下源码的实现. GitHub地址 https://github.com/roughike/BottomBar 先上个效果图使用添加依赖 compile 'com.roughike:bottom-bar:1.3.3' 创建menu资源文件 res/menu/bottombar_menu.xml: <menu xmlns:android="http://schemas.android.com/apk