WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Roych on November 19, 2013, 08:26:49 PM

Title: Menu with sub text?
Post by: Roych on November 19, 2013, 08:26:49 PM
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
Title: Re: Superfish menu with subheader text?
Post by: jacobi22 on November 19, 2013, 11:05:17 PM
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
Title: Re: Menu with sub text?
Post by: Roych on November 19, 2013, 11:16:28 PM
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
Title: Re: Menu with sub text?
Post by: jacobi22 on November 19, 2013, 11:55:31 PM
because 2.8.4 is not yet very stable and have had some issues with it.

not stable??   :-D :-D :-D

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)
Title: Re: Menu with sub text?
Post by: jacobi22 on November 20, 2013, 12:01:05 AM
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
Title: Re: Menu with sub text?
Post by: Roych on November 20, 2013, 12:25:59 AM
Didn't mean unstable just meant that it didn't work out for me, lol  :oops:


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  :wink:

thank you

Roych
Title: Re: Menu with sub text?
Post by: jacobi22 on November 20, 2013, 12:52:27 AM
Quote
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
Title: Re: Menu with sub text?
Post by: Roych on November 20, 2013, 12:59:19 AM
I didn loose my background color on my submenus, my problem is they all look the same as the main menu.
Title: Re: Menu with sub text?
Post by: evaki on December 12, 2013, 10:43:47 PM
@jakobi
Arbeite gerade an der gleichen Aufgabe
(Gehe davon aus, daß dieses Template (http://luiszuno.com/blog/downloads/modus-html-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
Title: Re: Menu with sub text?
Post by: jacobi22 on December 12, 2013, 11:04:56 PM
Quote
Bei mir scheint es zu funktionieren:
bei mir auch  :wink:
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
Title: Re: Menu with sub text?
Post by: evaki on December 12, 2013, 11:10:55 PM
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  :-D  (p.s. Wie meist, wieder maln Schreibfehler dabei)
MfG. Evaki
Title: Re: Menu with sub text?
Post by: Boudi on February 18, 2015, 09:32:51 AM
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")

Title: Re: Menu with sub text?
Post by: Roych on May 02, 2015, 12:28:19 AM
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.
Title: Re: Menu with sub text?
Post by: instantflorian on May 02, 2015, 09:41:17 AM
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.
Title: Re: Menu with sub text?
Post by: Gast on May 02, 2015, 01:36:29 PM
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 (http://forum.WebsiteBaker.org/index.php/topic,26238.msg196989.html#msg196989)
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
Title: Re: Menu with sub text?
Post by: Roych on May 02, 2015, 02:31:50 PM
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
Title: Re: Menu with sub text?
Post by: Gast on May 02, 2015, 03:07:24 PM
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
Title: Re: Menu with sub text?
Post by: Roych on May 04, 2015, 01:29:47 PM
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..
Title: Re: Menu with sub text?
Post by: nibz on May 05, 2015, 04:56:07 PM
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">'
    
);
?>

Title: Re: Menu with sub text?
Post by: Roych on May 11, 2015, 09:31:10 PM
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.