The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to add a menu with tabs?

View previous topic View next topic Go down

Solved How to add a menu with tabs?

Post by betclever on 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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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


Ramdaman
Active Poster

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

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: How to add a menu with tabs?

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

TY,

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

Thanks,

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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

Hi betclever,

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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?

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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

Hello,

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




Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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%;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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%;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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:


betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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%.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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?

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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?

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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:


betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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

Weird, try clearing your cache. This is what I see :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by betclever on 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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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

Ooh could you send me a test account by PM ?

Thanks

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

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

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

Thanks

Done. :wouhou:

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

Post by Ange Tuteur on 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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a menu with tabs?

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

MAGNIFIQUE!

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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: How to add a menu with tabs?

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

You're welcome !

Topic archived

Have a great day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum