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.

A separate navigation for categories

3 posters

Go down

In progress A separate navigation for categories

Post by MissUrsh November 3rd 2018, 1:16 pm

Hello! A few years ago there was a topic for something similar to this but I sadly can't find it anymore. I basically want another navigation under the main navigation; it would be like jumping between the categories. If I have 3 categories, for example "welcome", "life" and "chat", I would like to have three buttons below the main navigation and when I would click one, the forum would only display that one category. Is it clear what I mean? Smile

Thanks in advance!
MissUrsh
MissUrsh
Forumember

Female Posts : 130
Reputation : 11
Language : English

http://whentheshadowswalk.slovenianforum.com

Back to top Go down

In progress Re: A separate navigation for categories

Post by Ape November 3rd 2018, 2:13 pm


Yes I remember that thread also but sadly It looks like it stopped working so it was removed from the forum.


A separate navigation for categories Left1212A separate navigation for categories Center11A separate navigation for categories Right112
A separate navigation for categories Ape_b110
A separate navigation for categories Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19436
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: A separate navigation for categories

Post by MissUrsh November 3rd 2018, 5:01 pm

The links you've sent me might help me create that second navigation anyways?
MissUrsh
MissUrsh
Forumember

Female Posts : 130
Reputation : 11
Language : English

http://whentheshadowswalk.slovenianforum.com

Back to top Go down

In progress Re: A separate navigation for categories

Post by CAForum November 11th 2018, 8:34 am

Hi,

I propose to you a system of tabs with an addition to the navbar

Creating an HTML page


ACP - Modules - HTML & JAVASCRIPT - Create an HTML page

Name this page and remember to check YES to Use the top and bottom of the page :

A separate navigation for categories Sans_t27

Then paste this into the body of the page :

Code:
<div id="menu">
            
 <div id="active" class="menu">
       <a href="url page 1">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 2">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 3">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 4">Titre de l'onglet</a>      
 </div>
</div>

Add to this code as many pages as you want by adding this part,

Just before the last tag :

Code:
</div>

Add this:

Code:
<div class="menu">
       <a href="url page">Titre de l'onglet</a>      
 </div>

Think about validating

Then add this code to the CSS


Code:

  *{
 margin:0;
 padding:0;
}
#menu{
 float:left;
 background:#e7474e;
 margin:0 auto;
 height:50px;
}
.menu{
 float:left;
 width:100px;
 height:45px;
 text-align:center;
}
.menu a{
 display:block;
 height:30px;
 padding-top:15px;
}
.menu a:link, .menu a:visited{
 text-decoration:none;
 color: #000000;
 font-family:verdana, sans-serif;
 font-size:12px;
 background:#abc url(fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
 background:#abc url(fond.jpg);
 color: #000000;
}
.menu a:hover, .menu a:active, .menu a:focus{
 background:#abc url(fond.jpg) 0 -90px;
 color: #339933;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
 background:#abc url(fond.jpg);
 color: #339933;
}

Think about validating

To be able to use this page it is necessary to recover its url
Go back to the Management of HTML pages and click on the eye for the page concerned

A separate navigation for categories Oeil_t10

This will visualize your new page

A separate navigation for categories Sans_t28

Copy the link that is in the address bar of your browser, for example:

Code:
https://caforum.forumactif.com/h1-caforum

Add the link to the navbar


ACP - Affichage - Home Page - Header and Navigation

Click on "Add a custom menu"

In the Menu and Text sections fill in the name of this new menu
In the redirection url part, copy the link of the page in this form:

Code:
/h1-caforum

Select permissions
Then save

This new menu will be placed at the bottom of the page

A separate navigation for categories Sans_t29

With the help of the up and down arrows position where you want it on the navbar


Link for the final rendering: https://lesforums.caforum.fr/h1-caforum
CAForum
CAForum
Forumember

Male Posts : 33
Reputation : 4
Language : Français
Location : Paris

https://lesforums.caforum.fr/

Back to top Go down

Back to top

- Similar topics

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