css菜单上滑的效果_创建CSS3滑出菜单＃5

最新推荐文章于 2024-08-05 14:55:17 发布

cuken7684698822

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量446

点赞数

文章标签： html css less js svg ViewUI

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

版权

css菜单上滑的效果

CSS3 slideout menu tutorial. This is our fifth CSS3 menu. This will nice slideout menu with fading images (animated with transition effects). Make attention, that all these new effects (transitions) will work only in most fresh browsers like FF, Chrome, Safary browsers (possible in Opera too). But not in IE (transitions still not available here). I just added few hacks for IE – so menu will work here too (but not so smooth). Anyway – lets test our new menu.

CSS3滑出菜单教程。这是我们的第五个CSS3菜单。这将是带有褪色图像(带有过渡效果动画)的漂亮的滑出菜单。请注意，所有这些新效果(转换)仅在大多数新的浏览器(例如FF，Chrome，Safary浏览器(在Opera中也可能))中起作用。但是在IE中不可用(转换在这里仍然不可用)。我刚刚为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)

Here are html source of our menu. As you can see – here we can assign URL, title, and description to each link.

这是我们菜单的html源码。如您所见–在这里，我们可以为每个链接分配URL，标题和描述。

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 slideout menu #5</title>
</head>
<body>
<div class="example">
    <ul class="nav">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="https://www.script-tutorials.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/category/html-css/"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/category/resources/"><b>Resources</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/about/"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/creating-css3-slideout-menu-5/"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
    <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 slideout menu #5</title>
</head>
<body>
<div class="example">
    <ul class="nav">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="https://www.script-tutorials.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/category/html-css/"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/category/resources/"><b>Resources</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/about/"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="https://www.script-tutorials.com/creating-css3-slideout-menu-5/"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
    <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 #5 styles.

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

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


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:650px;
    height:382px;
    border:1px #000 solid;
    margin:20px auto;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* main menu styles */
ul.nav {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}
ul.nav table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}
ul.nav > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}
* html ul.nav > li {
    width:auto;
}
ul.nav > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}
ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(../images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}
ul.sub li {
    float:left;
}
ul.sub li:first-child {
    margin-left:45px;
}
ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}
ul.sub li a b {
    font-weight:700;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}
ul.sub li a i {
    display:block;
    width:64px;
    height:64px;
    position:absolute;
    right:10px;
    bottom:10px;
    background:url(../images/post.png);
    opacity:0.1;
    filter:alpha(opacity = 10);
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}
ul.nav > li:hover {
    width:600px;
}
ul.nav > li a.ie6:hover {
    direction:ltr;
    width:600px;
}
ul.sub li a:hover i {
    opacity:1.0;
}


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:650px;
    height:382px;
    border:1px #000 solid;
    margin:20px auto;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* main menu styles */
ul.nav {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}
ul.nav table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}
ul.nav > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}
* html ul.nav > li {
    width:auto;
}
ul.nav > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}
ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(../images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}
ul.sub li {
    float:left;
}
ul.sub li:first-child {
    margin-left:45px;
}
ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}
ul.sub li a b {
    font-weight:700;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}
ul.sub li a i {
    display:block;
    width:64px;
    height:64px;
    position:absolute;
    right:10px;
    bottom:10px;
    background:url(../images/post.png);
    opacity:0.1;
    filter:alpha(opacity = 10);
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}
ul.nav > li:hover {
    width:600px;
}
ul.nav > li a.ie6:hover {
    direction:ltr;
    width:600px;
}
ul.sub li a:hover i {
    opacity:1.0;
}