如何在html5中执行菜单 [英] how to do menu in html5
本文介绍了如何在html5中执行菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
嗨
i需要创建这样的菜单img
http://store1.up-00.com/2015-11/1446720509321.png
示例
在活动中我需要编写php代码
并在提供另一个代码php
和那样的
抱歉我的英语不好
hi
i need to create menu such as this img
http://store1.up-00.com/2015-11/1446720509321.png
example
in activity i need to write php code
and in offered another code php
and like that
sorry my english is not good
推荐答案
html :
html :
<article class="tabs">
<section id="tab1">
<h2><a href="#tab1">Tab 1</a></h2>
<p>This content appears on tab 1.</p>
</section>
<section id="tab2">
<h2><a href="#tab2">Tab 2</a></h2>
<p>This content appears on tab 2.</p>
</section>
<section id="tab3">
<h2><a href="#tab3">Tab 3</a></h2>
<p>This content appears on tab 3.</p>
</section>
</article>
css
css
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
非常感谢gokulprasad_1992
thank you very much gokulprasad_1992
这篇关于如何在html5中执行菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文