WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Meint on October 07, 2012, 06:40:11 PM
-
Dear forum membes,
Today I have spent trying to create a menu with round corners with show_menu2 and actual images for the corners instead of CSS3. The corners are part of a menu-item and should change together with the rest of the button. Eventually I got the borders to change when you hover over but the rest of the menu-item doesn't change along.
One of the things I tried is to fill in the page number of the first page in show_menu2.
"<li><a href="[url]" target="[target]" class="[class] p[page_id]">[menu_title]</a>"
When I found out all the other items change as well I quit because the client should be able to add and delete pages without my interference. So making separate css codes for every single page is not an option for me.
The result I have gotten so far can be seen on http://next.wvmkb-server.nl
I hope anyone can help me out.
-
Creating CSS rules is real programming. There are rules to follow, and syntax must be correct.
The slightes mistake will have consequenses that were not expected.
About your menu.css:
The .menu-first class selector is what you use for the hovering, so use the same selector (the complete same line without :hover) for the normal condition.
All other tries (.menu-top) should be removed.
Note also that .menu_top is not the same as menu-top
Al line like this:
#menu ul li a:hover {background: url('images/bg_menu_hover.png' repeat-x) ;color:#fff;text-decoration: none;}
just has a synax error. It should be like:
#menu ul li a:hover {background: url('images/bg_menu_hover.png') repeat-x ;color:#fff;text-decoration: none;}
-
Hi Ruud,
I changed the CSS and now I am more or less back at the point where I was when I posted my first question: When you hover over the first menu-item, only the corners change but the rest of the menu-item doesn't.
I could solve this by using one big image for the first menu-item, but my intention is eventually to use a sprite for the corners. If assume a way to do this is to use a span for the first item like it is done at www.bol.com, but I am not sure how to implement this with show_menu2.
Do you have any suggestions?
-
Its more a css related thing than a WB thing.
I allways try to make things in html / css and then adjust the index.html to index.php with the few lines of php.
Sliding doors is a technique (search google. Sliding doors css or something like that)
-
Hi nibz,
I found the sliding doors principle yesterday but from what I understood, even there I need to put a span in the first menu-item link. So I guess I need to change the code in show_menu2 to get the span, but I haven't been able to figure out yet how to achieve this.
I guess i should use [if(class==menu-first){exp}], but I am not sure how to.
-
doesn't it work if you simply replace the bg_menu_links_hover .png image?.
Make it larger... See the attatchment
-
Hi nibz,
It probably does but I prefer to keep the amount of images as small as possible in order to optimize the speed of the website as much as possible. Therefore I am looking for the option to work with sprites like the example of www.bol.com.
-
you can do so, check http://spriteme.org/,
It works like a sliding doors idea, but you can put in more images :)
and your image was small 1kb ... but the one i added was 0,48 (exported it for web use :))
but such small images would make the site load much slower
-
Ok, I get the point. :wink: I used your image and it works now.
By the way, I always save my images for Web and Devices. Didn't know I could reduce the file size of my PNG images even further. Will go and figure out how to.
Plus the tool for sprites looks good! I am going to use that for sure.
Nibz and Ruud, thanks for your help.