WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Round corners with show_menu2

(1/2) > >>

Meint:
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.


--- Code: ---"<li><a href="[url]" target="[target]" class="[class] p[page_id]">[menu_title]</a>"
--- End code ---

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.

Ruud:
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;}

Meint:
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?

nibz:
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)

Meint:
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.

Navigation

[0] Message Index

[#] Next page