css菜单下拉菜单_创建CSS3下拉菜单＃3

最新推荐文章于 2022-02-06 10:31:34 发布

cuken7684698822

最新推荐文章于 2022-02-06 10:31:34 发布

阅读量157

点赞数

文章标签： html css less nagios lnmp

原文链接：https://www.script-tutorials.com/creating-css3-dropdown-menu-3/

版权

css菜单下拉菜单

Creating CSS3 Dropdown Menu #3

创建CSS3下拉菜单＃3

This is our third CSS3 menu. This will colored tabs with slideout submenus. I don`t used any defined palette – tabs in different colors. Can warn, that all sliding effects will work only in FF, Chrome, Safary browsers, possible in Opera too. But not in IE (transitions still not available here). Anyway – welcome to test new menu.

这是我们的第三个CSS3菜单。这将为带有滑出子菜单的选项卡上色。我没有使用任何定义的调色板-不同颜色的标签。可以警告，所有滑动效果都只能在FF，Chrome，Safary浏览器中使用，也可以在Opera中使用。但是在IE中不可用(转换在这里仍然不可用)。无论如何-欢迎测试新菜单。

Here are final result (what we will creating):

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

Here are samples and downloadable package:

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

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download our example files (package) and lets start making this menu!

好的，下载示例文件(包)，然后开始制作此菜单！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. Here are html with our menu.

和往常一样，我们从HTML开始。这是带有菜单的html。

index.html (index.html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <title>CSS3 drop down menu #3</title>
</head>
<body>
<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="https://www.script-tutorials.com/" class="red">Home</a></li>
            <li><a href="https://www.script-tutorials.com/" class="orange">Tutorials</a>
                <div class="subs">
                    <dl>
                        <dt>Links #1</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #2</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #3</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #4</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="https://www.script-tutorials.com/category/resources/" class="yellow">Resources</a>
                <div class="subs">
                    <dl>
                        <dt>Links #5</dt>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #6</dt>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #7</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #8</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="https://www.script-tutorials.com/category/resources/" class="green">Other</a></li>
            <li><a href="https://www.script-tutorials.com/about/" class="blue">About</a></li>
            <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu-3/" class="violet">Back</a></li>
        </ul>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <title>CSS3 drop down menu #3</title>
</head>
<body>
<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="https://www.script-tutorials.com/" class="red">Home</a></li>
            <li><a href="https://www.script-tutorials.com/" class="orange">Tutorials</a>
                <div class="subs">
                    <dl>
                        <dt>Links #1</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #2</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #3</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #4</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="https://www.script-tutorials.com/category/resources/" class="yellow">Resources</a>
                <div class="subs">
                    <dl>
                        <dt>Links #5</dt>
                        <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #6</dt>
                        <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #7</dt>
                        <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #8</dt>
                        <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
                        <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="https://www.script-tutorials.com/category/resources/" class="green">Other</a></li>
            <li><a href="https://www.script-tutorials.com/about/" class="blue">About</a></li>
            <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu-3/" class="violet">Back</a></li>
        </ul>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu styles.

这是使用CSS样式。前两个选择器(您可以跳过它)属于我们的演示页面。所有其他–菜单样式。

css / style.css (css/style.css)


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:670px;
    height:470px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* main menu styles */
.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:10px;
    left:5%;
    position:absolute;
    top:-9px;
    width:90%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.5);
    height:0;
    width:100%;
}
.menuholder:hover div.back {
    height:250px;
}
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 5px 0 0;
}
ul.menu li > a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.2s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.2s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.2s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    color:#eee;
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#00a;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:670px;
    height:470px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* main menu styles */
.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:10px;
    left:5%;
    position:absolute;
    top:-9px;
    width:90%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.5);
    height:0;
    width:100%;
}
.menuholder:hover div.back {
    height:250px;
}
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 5px 0 0;
}
ul.menu li > a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.2s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.2s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.2s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    color:#eee;
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#00a;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}

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

Here are just background for page:

以下是页面的背景：

现场演示

结论 (Conclusion)

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

希望您喜欢新的菜单教程，不要忘了感谢并发表评论:)祝您好运！

翻译自: https://www.script-tutorials.com/creating-css3-dropdown-menu-3/

css菜单下拉菜单

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css菜单下拉菜单_创建CSS3下拉菜单＃3

css菜单下拉菜单Creating CSS3 Dropdown Menu #3 创建CSS3下拉菜单＃3 This is our third CSS3 menu. This will colored tabs with slideout submenus. I don`t used any defined palette – tabs in different colors. Can warn,...
复制链接

扫一扫