[HELP] How to make these tabs in PHP? ;/
2014-03-06, 09:25 PM,
(This post was last modified: 2014-03-06, 09:26 PM by mean969.)
#1
Hello cpaeliters,
I'm working on my landing page (coding in php) and I wonder how to make sth similar like this:
[Image: image.php?di=JTHW]
Please help me... Confused

I'M GONNA BE RICH
Reply
2014-03-06, 09:52 PM,
#2
Looks more like css3 / ajax to me.
Are you sure it's php alone?
Latest Thanks - View all

mean969(2014-03-06 10:02 PM) 
Reply
2014-03-06, 09:57 PM,
#3
It's most likely made using jQuery
Latest Thanks - View all

mean969(2014-03-06 10:03 PM) 
Reply
2014-03-06, 09:59 PM,
#4
Take a look here: https://jqueryui.com/tabs/
Then customize it with CSS :)
Good luck.
Latest Thanks - View all

mean969(2014-03-06 10:03 PM) 
Reply
2014-03-06, 09:59 PM,
#5
I'm pretty sure it's CSS/JS tab. I don't know if you know sth about coding, but if you know how to test things, have a try at this pure-css snippet (just copy/paste):

HTML:
Code:
<h1>
<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Description</label>
        <div id="tab-content1" class="tab-content">
          <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </li>
  
    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2">Specification</label>
        <div id="tab-content2" class="tab-content">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
</ul>

CSS:
Code:
@import url("http://fonts.googleapis.com/css?family=Lato");

$background: #9b59b6;
$tabs-base-color: #8e44ad;
* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}
body {
  padding: 20px;
  text-align: left;
  font-family: Lato;
  color: #fff;
  background: $background;  
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  float: left;
  margin: 20px 0 100px 10px;
  span {
    font-size: 13px;
    display: block;
    padding-left: 4px;
  }
}
.tabs {
  width: 650px;  
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
  li {
    float: left;
    display: block;
  }
  input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  label {
    display: block;
    padding: 14px 21px;
    border-radius: 2px 2px 0 0;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    background: $tabs-base-color;
    cursor: pointer;
    position: relative;
    top: 4px;
    @include transition(all 0.2s ease-in-out);
    &:hover {
      background: darken($tabs-base-color, 10);
    }
  }
  .tab-content{
    z-index: 2;
    display: none;
    overflow: hidden;
    width: 100%;
    font-size: 17px;
    line-height: 25px;
    padding: 25px;  
    position: absolute;
    top: 53px;
    left: 0;
    background: darken($tabs-base-color, 15);
  }
  //The Magic
  [id^="tab"]:checked + label {
    top: 0;
    padding-top: 17px;
    background: darken($tabs-base-color, 15);
  }
  [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
  }
}
p.link {
  clear: both;
  margin: 380px 0 0 15px;
  a {
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: darken($tabs-base-color, 15);
    @include transition(all 0.2s ease-in);
    &:hover {
      background-color: darken($tabs-base-color, 20);
    }
  }
}

Hope this helps.

Kind Regards
Latest Thanks - View all

mean969(2014-03-06 10:03 PM) 
Reply
2014-03-06, 10:00 PM,
#6
(2014-03-06, 09:52 PM)gatsu Wrote: Looks more like css3 / ajax to me.
Are you sure it's php alone?

nah, it's more than php, but I wanna to get a sample php code for this. Can someone do it?

EDIT: forgot to mention, the website where I found that is: hackreleases.com/iosandroid/clash-clans-hack-tool-v2-0-4-download/ Smile

I'M GONNA BE RICH
Reply
2014-03-06, 10:03 PM,
#7
Here you have many free ones

http://www.hongkiat.com/blog/50-nice-cle...n-scripts/

or just google "free jquery tab menu"
Latest Thanks - View all

mean969(2014-03-06 10:05 PM) 
Reply
2014-03-06, 10:04 PM,
#8
Thank you guys for answers, it helped me a lot. Now going to work Smile

I'M GONNA BE RICH
Reply
2014-03-06, 11:57 PM,
#9
yep, for sure thats jquery+css.. you can use jqueryui or bootstrap as they have that ready and very easy to implement and use
Reply
2014-03-07, 03:17 AM,
#10
its jquery its called interactive layout tabbed theres a bunch to pick from also i love this one when you hit the close button it has css animation and breaks into pieces and fades away
Goodluck :) Hope you find a nice one
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  How can I make a Quora.com BOT? vincenzot_t 12 512 2017-10-20, 04:44 PM
Last Post: honeydew
  Im a programmer, i can make mobile landings pwnisher 2 315 2017-07-28, 09:16 AM
Last Post: Pachu
  How to make step content in website 5light 0 146 2017-07-24, 11:04 AM
Last Post: 5light
  Help Needed CPAgrip php script takumi 4 797 2017-01-24, 04:47 AM
Last Post: takumi
  How to make this code? ngengs 7 833 2016-12-18, 09:51 PM
Last Post: bryan1




About Us | Contact Us | CPA Elites | Advertise | Stats | Staff Team

© 2013-2017 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top