How to add a menu with tabs? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    How to add a menu with tabs?

    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved How to add a menu with tabs?

    Post by betclever November 18th 2014, 6:07 pm

    Hey all,

    I would like to know how to make a menu with tabs like buttons?

    Is this possible with a script? If yes, which one?

    Thanks,


    Last edited by betclever on November 20th 2014, 1:06 am; edited 1 time in total
    Ramdaman
    Ramdaman
    Active Poster


    Male Posts : 1590
    Reputation : 99
    Language : English, Albanian, Macedonian, Russian | HTML, CSS
    Location : New York City

    Solved Re: How to add a menu with tabs?

    Post by Ramdaman November 18th 2014, 6:48 pm

    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 2:48 am

    TY,

    However, do you know where I can find some button models?

    Thanks,
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 2:52 am

    Hi betclever,

    Do you mean navigation images ? If so, you can find them here in the gallery : https://help.forumotion.com/f9-gallery
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 2:19 pm

    Thanks Ange Tuteur,

    I got a question regarding the bar I have at the moment on the left side on the top of the page.
    Can I move it to the center?
    Mati
    Mati
    Active Poster


    Posts : 1932
    Reputation : 333
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    Solved Re: How to add a menu with tabs?

    Post by Mati November 19th 2014, 5:44 pm

    Hello,

    In your CSS find ul.navlinks { and change top to top: 40%; or something that fits you.



    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 6:57 pm

    Thanks but can I move it to the center just under my title "Betclever" and rotate it to horizontal?

    www.betclever.net
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 10:51 pm

    Add this to your CSS :
    Display > Colors > CSS stylesheet
    Code:
    ul.navlinks a { display:inline }
    ul.navlinks {
      border:4px solid #FFF;
      border-radius:6px;
      padding:6px;
      top:240px;
      left:40%;
    }
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 10:55 pm

    Thanks Ange Tuteur but can we fix the bar cause when you scroll down, the bar follow the scroll Smile
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 10:57 pm

    Oops I didn't notice  Laughing

    Try now :
    Code:
    ul.navlinks a { display:inline }
    ul.navlinks {
      position:absolute;
      border:4px solid #FFF;
      border-radius:6px;
      padding:6px;
      top:210px;
      left:40%;
    }
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 11:04 pm

    Thanks Ange Tuteur,

    I have another problem regarding this navigation bar.

    I want to hide some buttons like galery, calendar but I can hide them for members but not for administrators.
    Is it possible to hide them or remove them?

    Can I remove the borders and just keep the buttons and is it possible to center this one? (The new one)

    Please find the print screen:

    How to add a menu with tabs? Captur11
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 11:10 pm

    Add this to your stylesheet :
    Code:
    a.mainmenu[href*="gallery"], a.mainmenu[href="/calendar"] { display:none }
    It should hide those buttons.

    Adjust the 40% here :
    Code:
    ul.navlinks {
      position:absolute;
      border:4px solid #FFF;
      border-radius:6px;
      padding:6px;
      top:210px;
      left:40%;
    }

    to a lower number, like 35%.
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 11:18 pm

    Thanks,

    This is what I have added:
    Code:
    a.mainmenu[href*="gallery"], a.mainmenu[href="/calendar"], a.mainmenu[href="/groups"], a.mainmenu[href="/search"], a.mainmenu[href="/members"] { display:none }

    However, how can I remove members from the nav bar cause I have tried this
    Code:
    a.mainmenu[href="/members"]

    It doesn't work... Smile

    Any possibility to remove the border from the style?
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 11:21 pm

    Use this for members :
    Code:
    a.mainmenu[href="/memberlist"]

    See if this removes the background, border, and shadow :
    Code:
    .linklist.navlinks.borderless {
      border:none;
      background:none;
      box-shadow:none;
    }
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 11:24 pm

    Ok, it works with memberlist but for the second code, nothing happens when I paste this one.
    However, do you see the space between the buttons?

    Is this possible to have the same space between the buttons?
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 19th 2014, 11:52 pm

    Okay, try now :
    Code:
    .linklist.navlinks.borderless {
      border:none !important;
      background:none !important;
      box-shadow:none !important;
    }

    See if this helps the spacing :
    Code:
    .linklist.navlinks li { margin:0 -4px }

    You might need to add some margin to your links.
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 19th 2014, 11:58 pm

    It doesn't work with the first code.
    However the second one works for the spaces but it's bigger see print screen:

    How to add a menu with tabs? Captur12
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 20th 2014, 12:13 am

    Weird, try clearing your cache. This is what I see :
    How to add a menu with tabs? Captur63
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 20th 2014, 12:20 am

    Indeed Smile

    Sorry for this Wink

    Last question for this navigation bar, is it possible to center this one automatically cause when an user will be connected, he will see 1 or 2 mores buttons and the bar goes to the right or to  the left and it's annoying.

    Thanks a lot for your help Ange tuteur Smile

    EDIT: I have tried with another browser and it works when you are disconnected but when I'm connecting, the design changes to the old one even if I delete the cookies or the content of my browser.
    Super strange Shocked Shocked
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 20th 2014, 12:28 am

    As long as you're using no background on the navigation this trick should work for centering it :
    Code:
    .linklist.navlinks.borderless {
      left:0 !important;
      right:0 !important;
      text-align:center;
    }
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 20th 2014, 12:32 am

    Super Ange tuteur, it works perfectly for the last code but did you read my previous post regarding the problem I have with the navigation bar when I'm connected?
    I don't have this problem when I'm disconnected.

    Super weird Smile
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 20th 2014, 12:35 am

    Ooh could you send me a test account by PM ?

    Thanks
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 20th 2014, 12:39 am

    Ange Tuteur wrote:Ooh could you send me a test account by PM ?

    Thanks

    Done. :wouhou:
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 20th 2014, 12:42 am

    Okay, add this to your stylesheet :
    Code:
    ul.navlinks {
      left:0 !important;
      right:0 !important;
      text-align:center;
      background:none !important;
      border:none !important;
      box-shadow:none !important;
    }
    avatar
    betclever
    Forumember


    Posts : 209
    Reputation : 2
    Language : english

    Solved Re: How to add a menu with tabs?

    Post by betclever November 20th 2014, 12:45 am

    MAGNIFIQUE!

    Nice job Ange tuteur and thanks for your time, super efficient as usual!
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: How to add a menu with tabs?

    Post by Ange Tuteur November 20th 2014, 1:08 am

    You're welcome ! How to add a menu with tabs? Heart10

    Topic archived

    Have a great day. Smile