Menu with sub text?

[Roych]

Hello

I'm having problems implementing superfish menu with smaler under text!


I would like the Main text to be [menu_title] and the subheader text to be [page_title] How do I do that?

I tryed all kinds of sf-menues but cant figure it out. Im not really very familiar with superfish menues.


I posted an image on how menu should look like!

Here is the main html code:

Code: [Select]

<nav>
<ul id="nav" class="sf-menu">
<li><a href="index.html">home<span class="subheader">welcome</span></a></li>
<li><a href="blog.html">blog<span class="subheader">read me</span></a></li>
<li class="current-menu-item"><a href="page.html">about<span class="subheader">great features</span></a>
              <ul>
<li><a href="page-full.html">Fullwidth Page</a></li>
<li><a href="page-features.html">Features</a></li>
<li><a href="page-typography.html">Typography</a></li>
<li><a href="page-icons.html">Icons</a></li>
              </ul>
</li>
<li><a href="portfolio.html">portfolio<span class="subheader">recent work</span></a></li>
<li><a href="contact.html">contact<span class="subheader">get in touch</span></a></li>
<li><a href="#">Grab it!<span class="subheader">Get it here</span></a></li>
               </ul>
</nav>

any idea how to do that is it even posible?

Thank you very much

Roych

[jacobi22]

my solution, but it works on a WB 2.8.4, not in 2.8.3
- change the code in some core files for a new input field in the page settings == menu_subtitle and a new field menu_desc for a menu point description in the title tag or in an extra field in the menu
- build new fields in the database table pages

- change the include.php from the show_menu2-module
- change the show_menu2-code code in the template

i use this for a jquery menu and in the moment, i have some problem , i lost the background-color in the submenus, so, i'm not finish

[Roych]

thank you for anwser.

Im using 2.8.3 and I don't wan't to upgrade because 2.8.4 is not yet very stable and have had some issues with it.
I'd like to get it done using show-menu2 it has to be a way.

Not working code!

Code: [Select]

<?php show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '[li] [a][menu_title]</a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul id="current">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
$aTopMenuOpen   = '<ul class="sf-menu">',
        $aTopMenuOpen   = false,
        $alastbutton   = true

); ?>


If there is [menu_title] there, then somehow this could be done by implement the [page_title]. But can't figure it out.

thank you

Roych

[jacobi22]

because 2.8.4 is not yet very stable and have had some issues with it.

not stable??  

i'm sure, we dont talking from the same WB  

use <span> for the subtitle, like

Code: [Select]

<li class="[class]"><a href="[url]" target="[target]">[menu_title]<span>[page_title]</span></a>or

Code: [Select]

<?php show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '[li][a][menu_title]<span>[page_title]</span></a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul id="current">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="sf-menu">',
        $aTopMenuOpen   = false,
        $alastbutton   = true

); ?>
and a simple css with a display:block for the span-element, like this

Code: [Select]

#menu li a span {display:block;font-size:10px;} maybe you have to change the menu-ID in the css (#menu is my ID for the menu-block)

[jacobi22]

i'm sure, we dont talking from the same WB  

i understand, that wb 2.8.4 is not finish now and every day we have new changes in the svn, so it can be a risk

[Roych]

Didn't mean unstable just meant that it didn't work out for me, lol 


yeeey!
Thank you, it looks Perfect. I used this.

Code: [Select]

<nav>
<ul id="nav" class="sf-menu">
<li><?php show_menu2(
        $aMenu           = 1,
        $aStart            = SM2_ROOT,
        $aMaxLevel       = SM2_ALL,
        $aOptions         = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '[li][a][menu_title]<span class="subheader">[page_title]</span></a>',
        $aItemClose       = '</li>',
        $aMenuOpen      = '<ul class="sf-menu">',
        $aMenuClose       = '</ul>',
        $aTopItemOpen   = false,
$aTopMenuOpen   = '<li class="sf-menu">',
        $aTopMenuOpen   = false,
        $alastbutton          = true

); ?>
</li>
</ul>
</nav>
but I think I did something wrong implementing it my subs are not as the should be what did I miss?
My original html

Code: [Select]

<nav>
<ul id="nav" class="sf-menu">
<li><a href="index.html">home<span class="subheader">welcome</span></a></li>
<li><a href="blog.html">blog<span class="subheader">read me</span></a></li>
<li class="current-menu-item"><a href="page.html">about<span class="subheader">great features</span></a>
               <ul>
<li><a href="page-full.html">Fullwidth Page</a></li>
<li><a href="page-features.html">Features</a></li>
<li><a href="page-typography.html">Typography</a></li>
<li><a href="page-icons.html">Icons</a></li>
               </ul>
</li>
<li><a href="portfolio.html">portfolio<span class="subheader">recent work</span></a></li>
<li><a href="contact.html">contact<span class="subheader">get in touch</span></a></li>
<li><a href="#">Grab it!<span class="subheader">Get it here</span></a></li>
                </ul>
</nav>


But have another question is it posible that my submenus dont show [page_title] and are normal?

I know stupid questions, but would really appreciate help on this 

thank you

Roych

[jacobi22]

But have another question is it posible that my submenus dont show [page_title] and are normal?
I know stupid questions, but would really appreciate help on this

thats, what i write in my first post here

[Roych]

I didn loose my background color on my submenus, my problem is they all look the same as the main menu.

[evaki]

@jakobi
Arbeite gerade an der gleichen Aufgabe
(Gehe davon aus, daß dieses Template gemeint ist -"schönes Teil")

Bei mir scheint es zu funktionieren:

Code: [Select]

<nav>
<?php show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '[li][a][menu_title]<span class"subheader">[page_title]</span></a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul id="nav" class="sf-menu">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = false,
        $alastbutton   = true

); ?>

</nav>
templates/modus/css/style.css

Code: [Select]


#nav li a span {display:block;font-size:10px;}
#nav>li>a:hover,
#nav>li.current-menu-item>a,
#nav>li.menu-current>a,
#nav>li.current_page_item>a{
background: #303232;
background: rgba(0,0,0,.2);
border-bottom: solid #1c1d1d 5px;
}

#nav>li.current-menu-item>a,
#nav>li.menu-current>a,
#nav>li.current_page_item>a{
color: #fe8300;
}

#nav>li>a>.subheader{


MfG. Evaki

[jacobi22]

Bei mir scheint es zu funktionieren:

bei mir auch 
falls das oben so rüber kam, das es in WB 2.8.3 nicht ginge....  ich meinte, das ICH nur noch in WB 2.8.4 baue

hier auch eine schöne Lösung von DarkViper -> http://www.WebsiteBaker.org/forum/index.php/topic,26589.msg181998.html#msg181998

P.S.:Template war bei mir Eigenproduktion

[evaki]

Ja, schöner Vorschlag von DarkViper
Entdecke gerade, daß mir noch active_page bzw actives menu fehlt, z.Z. ist nur die Schriftfarbe aktiv.
Da sollte auch der Hintergrund noch dunkler sein.
Schaun wir mal    (p.s. Wie meist, wieder maln Schreibfehler dabei)
MfG. Evaki

[Boudi]

Great post. Was looking for something like this to implement in a bootstrap code and it works (be sure to delete the class="sf-menu")

[Roych]

Hello, back here again 

I'm working on a new site and I'm having trouble with submenu for this kind of menu.

Code:

Code: [Select]

<ul class="nav sf-menu clearfix">

<li class="active"><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Home</div><div class="txt2">start here</div></a></li>
<li class="sub-menu sub-menu-1"><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">About</div><div class="txt2">Who are we?</div></a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit</a></li>
<li><a href="#">Sit amet</a></li>
<li><a href="#">404 page</a></li>
</ul>
</li>
<li><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Gallery</div><div class="txt2">photos</div></a></li>
<li><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Contacts</div><div class="txt2">mail us</div></a></li>

    </ul>
I made this and the main menu works great:

Code: [Select]

<?php show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '[li][a]<div class="over1"></div><div class="over2"></div><div class="txt1">[menu_title]</div><div class="txt2">[page_title]</div></a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul class="nav clearfix">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = false,
        $alastbutton   = true

); ?>
But the submenu is the same as the main menu. I tried all kind of things but cant figure it out with the submenu classes...

any ideas?

Thank you very much

R.

[instantflorian]

Have a look at the sm2 documentation chapter "Conditional formatting"
Tutorial link removed 404
(quite far down)

Code: [Select]

[if(class==menu-expand){exp}]
So you can place special classes if an item has sub-items.

But what does this

Code: [Select]

sub-menu-1
mean? Does every sub-menu need its own class or is it the level of the submenu?
In the first case, this could be a problem, because afaik there is no way to count the entries of the menu at a certain level.

hth
-Florian.

[jacobi22]

1. $alastbutton is not a part of the original show-menu-function

2. a good example for a menu like yours is the code from nibz here
see there the code like florian's example
[if(class==menu-expand){exp}]
means
if there is a class called menu-expand, do this, what you found between { and } (like {exp}.
{exp} can be also a longer definition like your example. (different HTML-Output for every Menu-Level is possible)
See also the method from nibz, where he define $open in a extra line


3. $aTopItemOpen && $aTopMenuOpen
see Readme
$aTopItemOpen
    Format string for the first item. When set to false, it uses the same
    format as $aItemOpen.

$aTopMenuOpen
    Format string for the first menu. When set to false, it uses the same
    format as $aMenuOpen.

if you need a different between main menu and submenu in the ul-tag, use a definition like this

Code: [Select]

<?php
        ........
        $aMenuOpen      = '<ul class="subnav">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = '<ul class="mainnav">',
        $aTopMenuOpen   = '</ul>'
means: every new list in a sub-menu started with <ul class="subnav">

Code: [Select]

<?php
$aMenuOpen      = '<ul class="subnav[level]">',
add the level to the subnav-class (subnav1, subnav2 etc). You can define different classes for every Level
like

Code: [Select]

ul.subnav1 li {background-color:#ff0000; }
ul.subnav2 li {background-color:#ffff00; }
4. [sib] counts the menu-parts on the actual level and!  in this menu tree, startet with 1, counting startet new in every menu tree

5. [sibCounts] is the sum of all elements in this menu tree and this level

6. SM2_NUMCLASS    Add the numbered menu classes to the menu. Example: all items on level==0 becomes the class menu-0

[Roych]

Thank you for answer

I tried with

Code: [Select]

[if(class==menu-expand){exp}] But still can't figure this-one out 

It always look's the same as main menu and the problem is because submenu only has [menu_title] ..
Im not a coder and would realy apreciate some help with this.

sub-menu-1 does nothing really it can be deleted!

Thank you

R

[jacobi22]

this code set the sub text only for the menu-items with the class menu-expand (is not the example like your post #12 date: 01-05-2015, 23:28:19

Code: [Select]

<?php

        $oItemOpen = '[if(class==menu-expand){[li][a][page_title]</a>}] [if(class!=menu-expand){[li][a]<div class="over1"></div><div class="over2"></div><div class="txt1">[menu_title]</div></a><div class="txt2"><i>[page_title]</i></div>}]';

                show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY|SM2_NUMCLASS,
        $aItemOpen      = $oItemOpen,
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul class="subnav[level]">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="mainnav">'

); ?>
if you need the sub-text only in level 0 (startlevel in root)

Code: [Select]

<?php

        $oItemOpen = '[if(level>0){[li][a][page_title]</a>}] [if(level==0){[li][a]<div class="over1"></div><div class="over2"></div><div class="txt1">[menu_title]</div></a><div class="txt2"><i>[page_title]</i></div>}]';

                show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY|SM2_NUMCLASS,
        $aItemOpen      = $oItemOpen,
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul class="subnav[level]">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="mainnav">'

); ?>
other conditions are in the readme

[Roych]

Hey, sorry for late response, was away for the weekend

Here is what I came up with and it's working fine. But the submenu still doesnt behave as it should: It flyes under the main menu now instead of flying to the right of the main menu.
(I have multiple menus and multilanguage site, so I had to give SM2_CURR to both so that they don't dissapear when click on one).  

Code: [Select]

<?php

    $oItemOpen = '[if(level>1){[li][a][page_title]</a>}] [if(level==1){[li][a]<div class="over1"></div>'
               . '<div class="over2"></div><div class="txt1">[menu_title]</div><div class="txt2">'
               . '<i>[page_title]</i></div></a>}]';
    show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_CURR,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = $oItemOpen,
        $aItemClose     = '</li>',
        $aMenuOpen      = '<ul class="sub-menu sub-menu-1[level]">',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="nav sf-menu clearfix">'
    );

Would just need to give the submenu the right class somehow.

thank you
R.

Edit says: code reformatted for better reading..

[nibz]

Code: [Select]

<ul class="nav sf-menu clearfix">

<li class="active"><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Home</div><div class="txt2">start here</div></a></li>
<li class="sub-menu sub-menu-1"><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">About</div><div class="txt2">Who are we?</div></a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit</a></li>
<li><a href="#">Sit amet</a></li>
<li><a href="#">404 page</a></li>
</ul>
</li>
<li><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Gallery</div><div class="txt2">photos</div></a></li>
<li><a href="#"><div class="over1"></div><div class="over2"></div><div class="txt1">Contacts</div><div class="txt2">mail us</div></a></li>

    </ul>

If above is what you want to achieve with show_menu2 then you could use this code:

Code: [Select]

<?php
    show_menu2(
        $aMenu          = 1,
        $aStart         = SM2_CURR,
        $aMaxLevel      = SM2_ALL,
        $aOptions       = SM2_ALL|SM2_PRETTY,
        $aItemOpen      = '<li class="[class] [if(class==menu-current){active}] [if(class==menu-expand){sub-menu sub-menu-[page_id]}]">[a][if(level==0){<div class="over1"></div><div class="over2"></div><div class="txt1">[menu_title]</div><div class="txt2">[page_title]</div>}][if(level>0){[menu_title]}]</a>',
        $aItemClose     = '</li>',
        $aMenuOpen      = '[ul]',
        $aMenuClose     = '</ul>',
        $aTopItemOpen   = false,
        $aTopMenuOpen   = '<ul class="nav sf-menu clearfix">'
    );
?>


[Roych]

Sorry, for late reply again 

nibz, I tried yours but didn't work as expected it only show Menu_name and it doesn't use any class which it should. And it does not work good with two menues. If I clik on one it changes the other one or it disapears.

The closest one I have now is:

Code: [Select]

<?php



        $oItemOpen = '[if(level>1){[li][a][page_title]</a>}] [if(level==1){[li][a]<div class="over1"></div><div class="over2"></div><div class="txt1">[menu_title]</div><div class="txt2"><i>[page_title]</i></div></a>}]';



                show_menu2(

        $aMenu          = 1,

        $aStart         = SM2_CURR,

        $aMaxLevel      = SM2_ALL,

        $aOptions       = SM2_ALL|SM2_PRETTY|SM2_NUMCLASS,

        $aItemOpen      = $oItemOpen,

        $aItemClose     = '</li>',

        $aMenuOpen      = '<ul class="sub-menu sub-menu-1[level]">',

        $aMenuClose     = '</ul>',

        $aTopItemOpen   = false,

        $aTopMenuOpen   = '<ul class="nav sf-menu clearfix">'



); ?>
Everything works great only the submenu doesn't flyes out from the left it drops down, but I think Im gonna keep it that way it kinda look good

Thank you for your help

R.