Images as Menulink

[Flogag]

Hi there,

any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.

Thank you for any input.

[albatros]

Hi,

here you can find an example https://forum.WebsiteBaker.org/index.php/topic,13184.0/topicseen.html.

hth

Uwe

[djdeeno]

wow, thats nice.

can we download this template or is there a other template where pics has the background from the buttons?

I want to make some new templates for WebsiteBaker so men can download it here.
But want to see examples on a working template so i understand the code right.

I am more a designer than a scripting girl.

thanks

[Argos]

Hi there,

any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.

Thank you for any input.

Give the menu LI a background image in your CSS file. There are lots of instructions about that on the web.

[djdeeno]

Oke, wel i have build my menu with images, looks fine and works but there is 1 thing i don't understand.
Visit the test page www.webcentre.nl/kaagloop
1) buttons are yellow, clik on Parcours, the button wil be blue, after youre click, Parcours button wil be grey, the submenu is open, this is green, when u click on kidsloop parcours (or other button from this submenu) parcours is back in yellow again, but what i want, when i be in the submenu, the button above must grey, so parcour must be grey and not back to yellow, i hope some one het help this blonde.
Thanks

this is the css

/* Main menu BEGIN */

div.mainmenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
div.mainmenu li {
    list-style: none;
    margin-left: 0px;
    padding-top: 0px;
}

div.mainmenu ul li a.menu_current:link, div.mainmenu ul li a.menu_current:visited {
    background-position: 0px -54px; 
    color: #000000;
    background-color: #eeeeee;

}
div.mainmenu ul li a:link, div.mainmenu ul li a:visited  {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    background: #eeeeee url(./images/geel.jpg);
    background-repeat: no-repeat;
    width: 100%;
    text-indent: 27px;
    text-decoration: none;
    line-height: 25px;
    height: 25px;
    margin-bottom: 2px;
}

div.mainmenu ul li a:hover {
    background-position: 0px -27px;
    color: #333333;
    background: #eeeeee url(./images/blue.jpg);

}
   
div.mainmenu ul ul a:link, div.mainmenu ul ul a:visited {
    font-size: 12px;
    color: #000000;
    font-size: 11px;

    text-indent: 10px;
    background: #eeeeee url(./images/green.jpg);
    width: 147px;
    line-height: 18px;
    height: 18px;
    margin-left: 4px;
    margin-bottom: 0px;
    padding-right: 5px;
}

div.mainmenu ul ul li a.menu_current {
    font-size: 13px;
    text-align: right;
    background: #eeeeee url(./images/rose.jpg);
}
div.mainmenu ul ul li a.menu_default {
    font-size: 12px;
}
div.mainmenu ul ul li a.menu_default:hover {
    font-size: 12px;
    text-decoration: underline;
    background: #eeeeee url(./images/orange.jpg);
}
div.mainmenu ul ul li a.menu_current:hover {
    font-size: 13px;
    text-align: right;
    text-decoration: underline;
}

[BlackTiger]

The way this menu is build has to be adjusted. Can you also tell the call of show_menu please?

regards
Michael

[djdeeno]

Hi Micheal
Yes, you mean this?

<?php if(SHOW_MENU)   ?>
<div class="mainmenu"><?php page_menu(0, 1, '<li>[a][menu_title][/a]</li>'); ?></div>

I have all my files zipped, you can download it, and maybe its works as template also, not testit. www.webcentre.nl/kaagloop/sandra_deeno.zip

U know what i mean?
Thanks for support.

[BlackTiger]

Use the following code to build the menu instead:

Code: [Select]

<div class="mainmenu"><?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_TRIM | SM2_PRETTY); ?></div>

Then you have to adjust your css-file: The currently selected item gets the class menu-current and the parent of a selected item (Parcours in your example) gets the class menu-parent. Use these classes to set the desired color.

regards
Michael

[djdeeno]

mmm sorry i don't understand it,
oke i can change the menu to menu2 string, but what must i change in de css. i work with images, everything works fine, only the buttons must have is own color/pic when i click on one of the subbuttons from this mainbutton, let me know

thanks

[BlackTiger]

The names of the classes are a little bit confusing. Before it was menu_current, now it is menu-current. Try if this css-code works:

Code: [Select]

/* Main menu BEGIN */

div.mainmenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
div.mainmenu li {
    list-style: none;
    margin-left: 0px;
    padding-top: 0px;
}

div.mainmenu ul li.menu-current a:link, div.mainmenu ul li.menu-current a:visited, div.mainmenu ul li.menu-parent a:link, div.mainmenu ul li.menu-parent a:visited {
    background-position: 0px -54px; 
    color: #000000;
    background: #eeeeee url(./images/blue.jpg);

}
div.mainmenu ul li a:link, div.mainmenu ul li a:visited  {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    background: #eeeeee url(./images/geel.jpg);
    background-repeat: no-repeat;
    width: 100%;
    text-indent: 27px;
    text-decoration: none;
    line-height: 25px;
    height: 25px;
    margin-bottom: 2px;
}

div.mainmenu ul li a:hover {
    background-position: 0px -27px;
    color: #333333;
    background: #eeeeee url(./images/blue.jpg);

}
   
div.mainmenu ul li.menu-expand ul a:link, div.mainmenu ul li.menu-expand ul a:visited {
    font-size: 12px;
    color: #000000;
    font-size: 11px;

    text-indent: 10px;
    background: #eeeeee url(./images/green.jpg);
    width: 147px;
    line-height: 18px;
    height: 18px;
    margin-left: 4px;
    margin-bottom: 0px;
    padding-right: 5px;
}

div.mainmenu ul li.menu-expand ul li.menu-current a:link, div.mainmenu ul li.menu-expand ul li.menu-current a:visited {
    font-size: 13px;
    text-align: right;
    background: #eeeeee url(./images/ROSE.jpg);
}
div.mainmenu ul li.menu-expand ul li a {
    font-size: 12px;
}
div.mainmenu ul li.menu-expand ul li a:hover {
    font-size: 12px;
    text-decoration: underline;
    background: #eeeeee url(./images/blue.jpg);
}
div.mainmenu ul li.menu-expand ul li.menu-current a:hover {
    font-size: 13px;
    text-align: right;
    text-decoration: underline;
}

/* Main menu END */

regards
Michael

[Stefek]

The names of the classes are a little bit confusing. Before it was menu_current, now it is menu-current.

That's right, but you can "teach" sm2 to still return  menu_current. 

The code is like:
  $aItemOpen      = &#39;<li [if(class==menu-current) {class="menu-current"}]>[a][menu_title]</a>&#39;,

(with some adjustment to your current needs)

Regards,
Stefek

[djdeeno]

wel everybody very thanks.
its works, so now i understand it, and can build my template.
When it finish i let u know.
thanks
x sunny

[linkspire]

Use the following code to build the menu instead:

Code:

<div class="mainmenu"><?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_TRIM | SM2_PRETTY); ?></div>


Then you have to adjust your css-file: The currently selected item gets the class menu-current and the parent of a selected item (Parcours in your example) gets the class menu-parent. Use these classes to set the desired color.
 
Spamlink removed