创建一个切换CSS3底部导航栏

最新推荐文章于 2023-09-20 08:50:45 发布

cuketao5066

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量568

点赞数

文章标签： html js css less svg ViewUI

原文链接：https://www.script-tutorials.com/css3-bottom-navigation-menu/

版权

CSS3 Bottom navigation menu tutorial. Today I prepared nice CSS3 bottom navigation menu for you. This is will sliding drop down menu with fixed position in bottom of screen. Also, I going to use jQuery for sliding effects.

CSS3底部导航菜单教程。今天，我为您准备了不错CSS3底部导航菜单。这将是滑动的下拉菜单，屏幕底部具有固定位置。另外，我将使用jQuery进行滑动效果。

Here are final result (what we will creating):

这是最终结果(我们将创建的结果)：

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are html source code of our page with menu. Whole menu built on UL-LI elements.

这是带有菜单的页面的html源代码。整个菜单均基于UL-LI元素。

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Bottom navigation menu | Script Tutorials</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="menuContent">
            <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Home</a></li>
                <li>
                    <ul id="1">
                        <li><a href="#"><img src="images/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 5</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a>
                </li>
                <li>
                    <ul id="2">
                        <li><a href="#"><img src="images/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 10</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a>
                </li>
                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
            </ul>
        </div>
        <footer>
            <h2>CSS3 Bottom navigation menu</h2>
            <a href="https://www.script-tutorials.com/css3-bottom-navigation-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Bottom navigation menu | Script Tutorials</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="menuContent">
            <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Home</a></li>
                <li>
                    <ul id="1">
                        <li><a href="#"><img src="images/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 5</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a>
                </li>
                <li>
                    <ul id="2">
                        <li><a href="#"><img src="images/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Link 10</a></li>
                    </ul>
                    <a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a>
                </li>
                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
            </ul>
        </div>
        <footer>
            <h2>CSS3 Bottom navigation menu</h2>
            <a href="https://www.script-tutorials.com/css3-bottom-navigation-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Here are the CSS styles of our menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our test page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.

这是菜单CSS样式。也许您已经注意到-在我们的html中-我有两个CSS文件：layout.css和menu.css。第一个文件(layout.css)包含测试页的样式。我们不会在本文中发布这些样式，但是如果您愿意–您可以在包中找到这些样式。

css / menu.css (css/menu.css)


.menuContent {
    background-color:#FFF;
    background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd));
    border:1px solid #C7C7C7;
    bottom: 70px;
    left: 300px;
    padding: 0 15px 5px;
    position: fixed;
    width:520px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-box-shadow: 3px -3px 5px #B8B8B8;
    -webkit-box-shadow: 3px -3px 5px #B8B8B8;
    box-shadow: 3px -3px 5px #B8B8B8;
}
.menuContent a.slider {
    background-color:#fff;
    background-image: -moz-linear-gradient(center top , #ddd, #FFF);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
    border: 1px solid #C7C7C7;
    border-bottom:none;
    cursor: pointer;
    float:right;
    height: 8px;
    margin:-15px 30px 0 0;
    padding:3px 20px;
    width: 8px;
    z-index: 2001;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    -moz-box-shadow: 3px -2px 3px #B8B8B8;
    -webkit-box-shadow: 3px -2px 3px #B8B8B8;
    box-shadow: 3px -2px 3px #B8B8B8;
}
.menuContent a.slider img {
    padding-bottom: 3px;
}
#nav {
    list-style: none;
}
#nav li {
    display: inline-block;
    margin: 10px;
}
#nav li a {
    border: 1px solid #ccc;
    color:#858585;
    display: block;
    padding: 5px 10px;
    text-align:center;
    text-decoration:none;
    width: auto;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
}
#nav li a:hover, #nav li a.active {
    background-color:#ddd;
}
#nav li ul {
    display:none;
}
#nav li ul li {
    margin: 5px 0;
    display: block;
}
#nav li a img {
    border-width: 0px;
    margin-right: 8px;
    vertical-align: middle;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}


.menuContent {
    background-color:#FFF;
    background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd));
    border:1px solid #C7C7C7;
    bottom: 70px;
    left: 300px;
    padding: 0 15px 5px;
    position: fixed;
    width:520px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-box-shadow: 3px -3px 5px #B8B8B8;
    -webkit-box-shadow: 3px -3px 5px #B8B8B8;
    box-shadow: 3px -3px 5px #B8B8B8;
}
.menuContent a.slider {
    background-color:#fff;
    background-image: -moz-linear-gradient(center top , #ddd, #FFF);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
    border: 1px solid #C7C7C7;
    border-bottom:none;
    cursor: pointer;
    float:right;
    height: 8px;
    margin:-15px 30px 0 0;
    padding:3px 20px;
    width: 8px;
    z-index: 2001;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    -moz-box-shadow: 3px -2px 3px #B8B8B8;
    -webkit-box-shadow: 3px -2px 3px #B8B8B8;
    box-shadow: 3px -2px 3px #B8B8B8;
}
.menuContent a.slider img {
    padding-bottom: 3px;
}
#nav {
    list-style: none;
}
#nav li {
    display: inline-block;
    margin: 10px;
}
#nav li a {
    border: 1px solid #ccc;
    color:#858585;
    display: block;
    padding: 5px 10px;
    text-align:center;
    text-decoration:none;
    width: auto;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
}
#nav li a:hover, #nav li a.active {
    background-color:#ddd;
}
#nav li ul {
    display:none;
}
#nav li ul li {
    margin: 5px 0;
    display: block;
}
#nav li a img {
    border-width: 0px;
    margin-right: 8px;
    vertical-align: middle;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}

步骤3. jQuery (Step 3. jQuery)

Finally, here are a little of JS code for our menu (for different slide effects).

最后，这是我们菜单的一些JS代码(用于不同的幻灯片效果)。

js / script.js (js/script.js)


$(function(){
    $('.slider').click(function () {
        $('#nav').slideToggle(300);
        var img = $(this).find('img');
        if ($(img).attr('id') == 'bot') {
            $(img).attr('src', 'images/arrow_top.png');
            $(img).attr('id', 'top');
        } else {
            $(img).attr('src', 'images/arrow_bottom.png');
            $(img).attr('id', 'bot');
        }
    });
    $('.sub').click(function () {
        var cur = $(this).prev();
        $('#nav li ul').each(function() {
            if ($(this)[0] != $(cur)[0])
                $(this).slideUp(300);
        });
        $(cur).slideToggle(300);
    });
});


$(function(){
    $('.slider').click(function () {
        $('#nav').slideToggle(300);
        var img = $(this).find('img');
        if ($(img).attr('id') == 'bot') {
            $(img).attr('src', 'images/arrow_top.png');
            $(img).attr('id', 'top');
        } else {
            $(img).attr('src', 'images/arrow_bottom.png');
            $(img).attr('id', 'bot');
        }
    });
    $('.sub').click(function () {
        var cur = $(this).prev();
        $('#nav li ul').each(function() {
            if ($(this)[0] != $(cur)[0])
                $(this).slideUp(300);
        });
        $(cur).slideToggle(300);
    });
});

步骤4.图片 (Step 4. Images)

Last step – used images:

最后一步–使用的图片：

现场演示

结论 (Conclusion)

Hope you enjoyed with our new css3 bottom sliding menu, don’t forget to tell thanks and leave a comment :) Good luck!

希望您喜欢我们新CSS3底部滑动菜单，别忘了感谢和发表评论:)祝您好运！

翻译自: https://www.script-tutorials.com/css3-bottom-navigation-menu/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建一个切换CSS3底部导航栏

CSS3 Bottom navigation menu tutorial. Today I prepared nice CSS3 bottom navigation menu for you. This is will sliding drop down menu with fixed position in bottom of screen. Also, I going to use jQuer...
复制链接

扫一扫