Click here to Skip to main content
15,877,915 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
Posted

html :
XML
<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;
}



CSS
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;
}



CSS
article.tabs section:first-child
{
    z-index: 1;
}



CSS
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;
}



CSS
article.tabs section:target,
article.tabs section:target h2
{
    color: #333;
    background-color: #fff;
    z-index: 2;
}



CSS
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;
}
 
Share this answer
 
thank you very much gokulprasad_1992
 
Share this answer
 
Comments
Gokulprasad05 6-Nov-15 0:51am    
It's my Pleasure
Richard Deeming 10-Nov-15 10:27am    
Don't post comments as new solutions. Use the "Have a Question or Comment?" button under the solution you want to reply to.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900