Back To Top
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • July 2019

    Calendar Calendar


    Display results as :

    Rechercher Advanced Search


    Tutorial: Tab Menu Empty
    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest


    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds

    Top posting users this week

    View previous topic View next topic Go down  Message [Page 1 of 1]


    Tutorial: Tab Menu

    I thought I'd share my code for creating a tab menu that has a colored tab effect on hover. I'll also step you through easily customizing it. It includes gradients, transparency, and rounded borders. 
    You can either create your own cool style text/image to upload or just the plain text.

    .mainmenu img{
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,0.5)), color-stop(1, rgba(0,0,0,0.5)));
            background:-moz-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-webkit-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-o-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-ms-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:linear-gradient(to bottom, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%); 
     -moz-border-radius-topright: 5px 5px;
    border-top-right-radius: 5px 5px;
      -moz-border-radius-topleft: 5px 5px;
    border-top-left-radius: 5px 5px;
      border: 1.5px rgba(0,0,0,0.15) solid;

    .mainmenu img:hover {

    This is for the image version if you just use text then just remove "img" so that it says .mainmenu { and .mainmenu:hover {

    On the hover you can change the colored tabs using rgba. If you don't know this is red, green, blue, alpha(transparency) Here is a helpful place to get the rgb

    Next you can remove transparency if you'd like by setting alpha to 1 on both parts of the mainmenu and hover. Here is the code for the mainmenu part
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,1)), color-stop(1, rgba(0,0,0,1)));
            background:-moz-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-webkit-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-o-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-ms-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:linear-gradient(to bottom, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%); 

    Now to change gradient under .mainmenu { it works the same way with rgba. It is setup to work in multiple browsers so you'll have to change each line of the code. The first part is the top and the second is the bottom as such: (top, !top!rgba(200,200,200,0.1) 5%, !bottom!rgba(0,0,0,0.1) 100%);

    One last thing to cover is the tabs style. There is a border effect so that the tops are rounded and the bottom has corners. If you want completely rounded corners use this to replace the current code. 
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;
    You can change the #px, the higher the number the more rounded the corners will be. There is also a small border which you can change right below the border radius effect. You can change it to 0px if you'd like to remove it or change the color as rgba as well.

    Hope this helps everyone, here is an example: [You must be registered and logged in to see this link.]
    Share this post on: diggdeliciousredditstumbleuponslashdotyahoogooglelive

    Also Mr.EasyBB could you move this to the right topic I wasn't sure where you would want this since it's a tutorial but not really by a mod or admin. Thanks Smile

    Post on June 3rd 2013, 7:28 pm by DesignersSociety

    This forum only has Admin's both Easy and myself there are no Mods, we as Admin's do the moderating, but I'll let Easy move this where he thinks is the appropriate place as he handles the tuts more than I do.

    Thanks for the contribution.. Smile

    Post on June 4th 2013, 6:03 am by runawayhorses

    Has been moved to the ForuMotion Tutorials. Thank you, we appreciate your contribution! I'll be adding some points to your account for taking the initiative to participate in this website and its tutorials! Added (100pts)

    Post on June 4th 2013, 5:11 pm by Mr.EasyBB

    Oh it's no problem I pretty much enjoy writing them just for fun Ill do more when I get chances Smile

    Post on June 5th 2013, 12:01 am by DesignersSociety

    Ok we've made a specific spot for them. Either you can go to the right and click the Submit A Tut, or go to the menu and go to Tutorials, and click Member Submitted. Wink Then once accepted they will be placed in the correct locations

    Post on June 5th 2013, 12:08 am by Mr.EasyBB

    Ooo I love that feature makes me wanna make even more!

    Post on June 5th 2013, 12:35 am by DesignersSociety

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]