WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Housy on July 22, 2009, 08:31:21 PM
-
Hello :-)
(http://www4.slikomat.com/09/0722/x71-menu.png)
On the picture above you see the menu and here is a little problem that i have. Actually i don't really even know where to start to be honest, because i want as well active menus, that means, when i'm on the page contact for example, button contact is coloured like home (see picture) and when i click on download, the same thing happens and so on. I was thinking to use the <ul> tag, but then i don't know how to continue, cause i have no idea, how should i slice those images and how to make active buttons.
Can someone please tell me how to deal with that problem, so everything would work perfectly?
Sorry about my english, i hope i explained as good as possible.
Thank you,
Housy
-
I was thinking to use the <ul> tag, but then i don't know how to continue, cause i have no idea, how should i slice those images and how to make active buttons.
Well, I suggest looking for a WB template with graphic menu buttons, and see how it's done.
-
I was thinking to use the <ul> tag, but then i don't know how to continue, cause i have no idea, how should i slice those images and how to make active buttons.
Well, I suggest looking for a WB template with graphic menu buttons, and see how it's done.
Yes i did that, thank you and i found a piece of the code, which is:
<?php show_menu(1,0,-1,true,'<li>[a][menu_title][/a]</li>','','<ul>','</ul>','','class="current"'); ?>
Can you please explain me, how exactly that works? Because instead of
[i]<li>[a][menu_title][/a]</li>[/i]
i'd probably have something like
<li>[a]<img>LEFT SIDE OF GRAY BUTTON[</img>[menu_title]<img>RIGHT SIDE OF GRAY BUTTON</img>[/a]</li>
and in CSS i would define a like { background-image: url("gray_button_backgro und.png"); } and for the current page i'd just change gray images and background to red if you know what i mean.
P.S. --> I haven't seen any identical or that complicated menu in the WB templates section.
Thank you,
Housy
-
It's not that easy. You'll probably have to work with conditional statements and show_menu2 (http://code.jellycan.com/show_menu2/). I can't help you. Figuring out this kind of stuff can take hours if not days. Try to find a template that does what you want as close as possible. Look for newest templates, that use show_menu2 instead of show_menu.
-
It's not that easy. You'll probably have to work with conditional statements and show_menu2 (http://code.jellycan.com/show_menu2/). I can't help you. Figuring out this kind of stuff can take hours if not days. Try to find a template that does what you want as close as possible. Look for newest templates, that use show_menu2 instead of show_menu.
Thank you, i'll try to do that, but i'm not that good in code (PHP) :-( i'll atleast try and if there will be any problem, i'll be back :-D
-
What adds to the difficulty is the fact that your menu items have different backgrounds, not only for active and normal status, but also for beginning and end of the menu. In this picture I have shown some of the situations that you'll need to provide for, but there are more options. I think you'll need at least 8 different situtions that you need to style. You'd better switch to another type of menu, with rectangular tabs instead of the dashed 3D ones. Or if you can live with a fixed menu, create a fixed one with the tabs you need, and use CSS to style the tab links instead of the tabs themselves. Much easier! :-D
Or if you really need this menu, inclusing the active status, but a fixed menu is okay, you could use an external menu. Lots of CSS and DHTML examples to be found on the web! Then you don't have to bother with the menu generating function of WB.
[gelöscht durch Administrator]
-
Take a look here:
http://www.cssplay.co.uk/menus/gif_overlap.html
-
Or if you really need this menu, inclusing the active status, but a fixed menu is okay, you could use an external menu. Lots of CSS and DHTML examples to be found on the web! Then you don't have to bother with the menu generating function of WB.
The problem is that my client wants that menu :lol: and it shouldn't be fixed (that would be easy to do), because the client wants the button is flexible/adjustable, so if you have longer word in link, it works as well.
P.S. --> thanks for the link man, i'll try that :-D
-
The problem is that my client wants that menu :lol: and it shouldn't be fixed (that would be easy to do), because the client wants the button is flexible/adjustable, so if you have longer word in link, it works as well.
Sorry, I said fixed, but I meant static. So the menu is not generated by WB. Of course the tabs can stretch with the content, that is no problem.
-
I'm really desperate you know, cause the guy who draw everything in photoshop, he put the whole menu in one layer, so i really dont know what to do.
Cause here on CSSplay he uses one image, what is absolutely correct, so when you go over the link or click on it, you don't have preload issues (talking if you have images seperated). I'm not quite sure how should i deal with my problem. Probably i'll have to say to the Photoshop guy that i need each button (normal, active and the last one seperated, each one on their own layer), cause if you noticed my links has shadows as well.
Do you think it is possible to do that with the slicing that you have shown on the image in the previous post? or do i need every single button seperated and i put them together like this
(http://www.cssplay.co.uk/menus/tabs/tab3.gif)
Tnx,
Housy
-
Take a look at
http://www.cssplay.co.uk/menus/overlap.html
http://www.cssplay.co.uk/menus/overlap_two.html
http://www.cssplay.co.uk/menus/gif_overlap.html
And try to create your menu with the techniques used. You can do it yourself, or give the "photoshop guy" instructions to create all files you need for the menu.
And don't be afraid to tell your client the menu will be a bit different due to technical reasons. Or don't mention it at all, he'll probably doesn't notice it. And if he does, be lighhearted about it: "Yeah, it's a bit different, it had technical reasons I won't bother you with".
-
Hi,
It would be very very dificuilt to make a manu just from this pictures as you would have to slice and work in photoshop a lot !!!!!
Argos is right, You would have a lot of pieces
At the begining and the end you have 2 !!!! If menu is red or grey !
Then you do not have example if red tab is in the middle (you do not have left part of red tab when red tab is in the middle and grey is on his left)
You should really ask your designer to provide you all layers !!!! As this way, you would have to make pieces in photoshop on your own !!! (then you do designers job too) :roll: :roll: :roll: :roll: :roll: :roll: :roll:
-
Thank you very much guys :-)
I told the photoshop guy and he'll fix it, so normal button and active will be seperated. And no problem with shadows cause i could use this menu --> click (http://www.cssplay.co.uk/menus/overlap_two.html) (Tnx for the link Argos, exactly what i needed)
Housy
-
Ok menus work now, but here is another question, how to combine all that with show_menu2? The site is also Multilingual and on the page i have 2 kinds of links, one at the top and the other somewhere else on the page. So probably i have to assign to the top links some value and to the bottom links some other value and with show_menu print everything out? Or how should i do that?
P.S. --> Should i modify function show_menu2, would that be easier? Here is the code as well, how TOP links should look like:
<ul>
<li><a href="#" class="m1"><b class="p1"> </b><b class="p2">Domov</b><b class="p3"> </b></a></li>
<li><a href="#" class="m2"><b class="p1"> </b><b class="p2">Cenitve</b><b class="p3"> </b></a></li>
<li><a href="#" class="m3 selected"><b class="p1"> </b><b class="p2">Financiranje</b><b class="p3"> </b></a></li>
<li><a href="#" class="m4"><b class="p1"> </b><b class="p2">Selitve</b><b class="p3"> </b></a></li>
<li><a href="#" class="m5"><b class="p1"> </b><b class="p2">Zavarovanje</b><b class="p3"> </b></a></li>
<li><a href="#" class="m6"><b class="p1"> </b><b class="p2">O podjetju</b><b class="p3"> </b></a></li>
<li><a href="#" class="m7"><b class="p1"> </b><b class="p2">Kontakt</b><b class="p3"> </b></a></li>
</ul>
Thank you,
Housy
-
Here is the picture of links that are seperated, so you can imagine a little bit better.
(http://www4.slikomat.com/09/0724/hba-exampl.png)
-
If bottom menu is not part of (parent) the top one, then you need to enable multiple menu in admin/ settings / advanced settings:
More info can be found here: http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide/multiple-menus.php
Also about multilanguage site, you can see more info here: http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide/multilingual-websites.php
There are several more solutions how to create multilanguage site, just search the forum..
cheers
-
If your menus are static and don't need to be generated by WB, than you can use just the code you entered. Sometimes that's easier than going the dynamic way. It's often more easy to style anyway.
I wonder about the <b class=blabla> tags though... Why do you use b tags instead of div or span?
-
If your menus are static and don't need to be generated by WB, than you can use just the code you entered. Sometimes that's easier than going the dynamic way. It's often more easy to style anyway.
I wonder about the <b class=blabla> tags though... Why do you use b tags instead of div or span?
Yeah i'll do it static way, but i have a question here, i don't really understand how do you change the language (the text inside links, if you know what i mean), if menus aren't generated by WB, cause if they are generated by WB, text inside links is changed to other languages automaticaly. Cause if i leave it static way and click on german language for example, menus/links will still be in the english language. I don't really understand, but i'll search through the forum and if i won't find anything useful, i'll be back :-D
Why b tags? To be honest, i don't know, i just followed the code from the link and i just modified the css file. But i agree with you, span would be better in this case. But the most important thing is, that works perfect and even with b tag :-)
P.S. --> if static way, i'd probably have to check with if statement for example if(german) echo "menu with german text" and so on? Or am i wrong?
Thank you both,
Housy
-
i don't really understand how do you change the language (the text inside links, if you know what i mean), if menus aren't generated by WB, cause if they are generated by WB, text inside links is changed to other languages automaticaly. Cause if i leave it static way and click on german language for example, menus/links will still be in the english language.
The multilanguage capabilities of WB are not very sophisticated. In fact, you just create different pages for each language, so you end up with mirror sites within the main site. For each page within a certain mirror site you set the language. So if your main site is English, and you have a mirror site in French, you set the language for each page within the French section to French (in the page settings). Because each page has its own menu title, you don't have to work with IF THEN constructions. You just create a menu for each language section. It's most practical to use dedicated templates for each language section as well. But check out the support info about it, as crnogorac081 mentioned.
-
i don't really understand how do you change the language (the text inside links, if you know what i mean), if menus aren't generated by WB, cause if they are generated by WB, text inside links is changed to other languages automaticaly. Cause if i leave it static way and click on german language for example, menus/links will still be in the english language.
The multilanguage capabilities of WB are not very sophisticated. In fact, you just create different pages for each language, so you end up with mirror sites within the main site. For each page within a certain mirror site you set the language. So if your main site is English, and you have a mirror site in French, you set the language for each page within the French section to French (in the page settings). Because each page has its own menu title, you don't have to work with IF THEN constructions. You just create a menu for each language section. It's most practical to use dedicated templates for each language section as well. But check out the support info about it, as crnogorac081 mentioned.
If i understand you correctly, i should do 2 templates for example and i would put every link manualy in each template, like for example:
English template
<ul>
<li><a href="http:/www.mysite.com/pages/en/home.php">Home</a></li>
</ul>
German template
<ul>
<li><a href="http:/www.mysite.com/pages/de/startseite.php">Startseite</a></li>
</ul>
And then when i add a new page in each language, i always choose the right template for it and add links in both templates manually?
Is that the right way? So i must create and install 2 different templates?
Thank you,
Housy
-
Oh yeah :-D That thing with templates works great :-D
Thank you, and it's much easier than show_menu function :wink:
Thanks again,
Housy
-
You do not have to change template unless you want ! Both languages can use same template, unless you want other language to use different. Then you have to set for each page that (other) template.
Anyway if you use solution:
http:/www.mysite.com/pages/en/home.php">Home
http:/www.mysite.com/pages/de/startseite.php">Startseite
Then you have to set your menu like this:
EN
-Home
-Page 2
- Sub Page...
DE
- Startsiete
- Sub page german (sorry I dont speak deuche...)
<?php show_menu2(0, SM2_ROOT, ..... is first menu (to choose EN or DE) , and
<?php show_menu2(0, SM2_ROOT+1, shows Home, page2... if you chose EN for example..
For more info check show_menu2 page.
As you can see, root level is menu en and DE , and ROOT+1 is Home (if you click english) , page 1, ROOT+2 is Sub page 1 (if you clikc english) ...
Also there is another solution for multilanguage site, and I will try to post an example tonight, or at monday (I am off for weekend)
-
And then when i add a new page in each language, i always choose the right template for it and add links in both templates manually?
Is that the right way? So i must create and install 2 different templates?
Yes, that is the most easy way. Of course you can use dynamical WB menus, like crnogorac081 wrote. That is technically "nicer" if you like. But if the pages remain constant, you can use the manual way just as well.
-
It's a much better, easier and faster solution to do it my way (templates), if you're not that familiar with show_menu function, except if your menu is very simple, then you should ofcourse use dynamical WB menu.
Thanks, I owe both of you a beer :lol:
Off topic: Crnogorac, ti si iz crne gore, jel tako? :-D
Housy
-
aha :)
-
Hey, it's me again, if static way, how do i deal with the current/active link then? I have to check if page_id or something is equal to 1 for example and set the class="active" to home button.
This menus are killing me :|
Tnx, Housy
-
I have done what you are looking for on maycroft.com. The main menu (the green bar) are static links, like so:
<ul>
<li><a class="<?php if(PAGE_ID == 3 | ROOT_PARENT == 3) {echo 'activemenu';}?>" href="#">Risk Management</a></li>
<li><a class="<?php if(PAGE_ID == 4) {echo 'activemenu';}?>" href="#">Carbon Trading</a></li>
<li><a class="<?php if(PAGE_ID == 52 | ROOT_PARENT == 52) {echo 'activemenu';}?>" href="#">Education</a></li>
<li><a class="<?php if(PAGE_ID == 2) {echo 'activemenu';}?>" href="#">Exchanges and Clearing</a></li>
</ul>(I use # instead of real url's in this code example)
You see two menu items have the extra bit | ROOT_PARENT == to ensure that their children pages also cause the parent menu item to show the active status.
So you have to look up the page id's for each page, and create a css style for the actively selected status. Often that is the same as the hover style. So in my css file I have:
#mainmenu li a:hover,
#mainmenu li a.activemenu {
background: url('../images/mainmenu-back2-hover.gif') left top repeat-x;
}
-
Thanks a lot Argos, it works really well :-D
Housy
-
Thanks a lot Argos, it works really well :-D
Nice to know that it worked out well! :wink: