PDA

View Full Version : Making different navbars

antistar
Dec-09-2008, 05:05 AM
Hello there, I'm a new user. I haven't found a thread about this, so here's my problem.

I would like to make different navbars, because I'm creating a website in three languages. How can I do it?

Thanks

My site is http://www.jonathanhoule.com/ although there isn't much on it right now.
Allen
Dec-09-2008, 06:00 AM
Hello there, I'm a new user. I haven't found a thread about this, so here's my problem.

I would like to make different navbars, because I'm creating a website in three languages. How can I do it?

Thanks

My site is http://www.jonathanhoule.com/ although there isn't much on it right now.
Welcome to Dgrin :wave

You would define the different nav versions in your header assigning the
same class to each so one set of CSS will format them all.

<!-- English -->
<div id="navcontainer1" class="menu">
....
</div>
<!-- Français -->
<div id="navcontainer2" class="menu">
....
</div>
<!-- Español -->
<div id="navcontainer3" class="menu">
....
</div>

CSS using the class instead of div id. See this tutor (http://dgrin.smugmug.com/gallery/1932803) for reference.

.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.menu ul li {
display: inline;
}

.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

.menu ul li a:hover {
color: #fff;
background-color: #369;
}

Also in the CSS you would define where each nav is use. This is very variable
depending on what your main pages will be and if only certain galleries will
be different. This below assumes navcontainer1 will be everywhere but
certain places.


#navcontainer2 {display: none;}
#navcontainer3 {display: none;}

.category_xxxxxxxx #navcontainer1 {display: none;}
.category_xxxxxxxx #navcontainer2 {display: block;}

.gallery_xxxxxxxx #navcontainer1 {display: none;}
.gallery_xxxxxxxx #navcontainer2 {display: block;}

.gallery_xxxxxxxx #navcontainer1 {display: none;}
.gallery_xxxxxxxx #navcontainer3 {display: block;}

That's the basic idea.
antistar
Dec-09-2008, 08:11 AM
Thanks for welcoming me and for the quick reply! :D

I got it right for creating the different navigation bars, but not too well for the displaying.

So far, I have four navcontainers:

navcontainer0: The choice of languages that can be found everywhere. I decided to put it in the footer instead.

navcontainer1: Navigation bar in French
navcontainer2: Navigation bar in English
navcontainer3: Navigation bar in Spanish

The idea is that I will give the option to choose the language in the bio box, and the viewer will be directed to a homepage in his language. I have created three empty galleries to serve as temporary homepages to help you help me :scratch

Homepage in French: 6784553_FB4s8
Homepage in English: 6784557_tNChF
Homepage in Spanish:6784560_KVmrj

So what I want to have is:

- no navigation bar in the header of the homepage
- navcontainer1 showing up in gallery 6784553_FB4s8
- navcontainer2 showing up in gallery 6784557_tNChF
- navcontainer3 showing up in gallery 6784560_KVmrj

Thank you in advance!
Allen
Dec-09-2008, 09:45 AM
Thanks for welcoming me and for the quick reply! :D

I got it right for creating the different navigation bars, but not too well for the displaying.

So far, I have four navcontainers:

navcontainer0: The choice of languages that can be found everywhere. I decided to put it in the footer instead.

navcontainer1: Navigation bar in French
navcontainer2: Navigation bar in English
navcontainer3: Navigation bar in Spanish

The idea is that I will give the option to choose the language in the bio box, and the viewer will be directed to a homepage in his language. I have created three empty galleries to serve as temporary homepages to help you help me :scratch

Homepage in French: 6784553_FB4s8
Homepage in English: 6784557_tNChF
Homepage in Spanish:6784560_KVmrj

So what I want to have is:

- no navigation bar in the header of the homepage
- navcontainer1 showing up in gallery 6784553_FB4s8
- navcontainer2 showing up in gallery 6784557_tNChF
- navcontainer3 showing up in gallery 6784560_KVmrj

Thank you in advance!
Let's get the html first then will work on the CSS
Replace your header with this. The <!-- and --> are comment tags for any text description you want.

<h2>Photographie Jonathan Houle</h2>

<!-- Français -->
<div id="navcontainer1" class="menu">
<ul>
<li><a href="/gallery/6784553_FB4s8">Accueil</a></li>
<li><a href="/gallery/6743495">Services</a></li>
<li><a href="/gallery/6743495">Portfolio</a></li>
<li><a href="/gallery/6743495">Galleries</a></li>
<li><a href="/gallery/6743495">Blog</a></li>
<li><a href="/gallery/6743495">Rechercher</a></li>
<li><a href="/gallery/6743495">Contact</a></li>
</ul>
</div>

<!-- English -->
<div id="navcontainer2" class="menu">
<ul>
<li><a href="/gallery/6784557_tNChF">Home</a></li>
<li><a href="/gallery/6743495">Services</a></li>
<li><a href="/gallery/6743495">Portfolio</a></li>
<li><a href="/gallery/6743495">Galleries</a></li>
<li><a href="/gallery/6743495">Blog</a></li>
<li><a href="/gallery/6743495">Search</a></li>
<li><a href="/gallery/6743495">Contact</a></li>
</ul>
</div>

<!-- Español -->
<div id="navcontainer3" class="menu">
<ul>
<li><a href="/gallery/6784560_KVmrj">Inicio</a></li>
<li><a href="/gallery/6743495">Servicios</a></li>
<li><a href="/gallery/6743495">Portfolio</a></li>
<li><a href="/gallery/6743495">Galerías</a></li>
<li><a href="/gallery/6743495">Blog</a></li>
<li><a href="/gallery/6743495">Buscar</a></li>
<li><a href="/gallery/6743495">Contacto</a></li>
</ul>
</div>

Add the class to your footer

<!-- Home -->
<div id="navcontainer0" class="menu">
<ul>
<li><a href="/gallery/6784553_FB4s8">Français</a></li>
<li><a href="/gallery/6784557_tNChF">English</a></li>
<li><a href="/gallery/6784560_KVmrj">Español</a></li>
</ul>
</div>

In order to play with the CSS the html has to be set first or switching pages
the html will refreash each time. Using WebDev to play with CSS.

I'll be back in a couple hours and will check then. But will start with this CSS.
Let the bottom nav be on all pages for now, will define later.
The .menu formats all of the navs.

.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.menu ul li {
display: inline;
}

.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}

.menu ul li a:hover {
color: #ccc;
background-color: #000;
}

#navcontainer1,
#navcontainer2,
#navcontainer3 {display: none;}

.gallery_6784553_FB4s8 #navcontainer1,
.gallery_6784557_tNChF #navcontainer2,
.gallery_6784560_KVmrj #navcontainer3 {display: block;}
antistar
Dec-09-2008, 01:21 PM
Done. Then, I suppose I have to create language classes to group galleries by language, and block the inappropriate navigation bars for each class? I'll experiment a little bit, it's starting to make sense to me. Thanks!
Allen
Dec-09-2008, 02:10 PM
Done. Then, I suppose I have to create language classes to group galleries by language, and block the inappropriate navigation bars for each class? I'll experiment a little bit, it's starting to make sense to me. Thanks!
You could create a category for each then have many sub-cats and galleries
under each. Each whole category could be assigned its appropriate nav.