WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started 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:
<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
-
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
-
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!
<?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
-
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
<li class="[class]"><a href="[url]" target="[target]">[menu_title]<span>[page_title]</span></a>
or
<?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
#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)
-
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
-
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.
<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
<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
-
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
-
I didn loose my background color on my submenus, my problem is they all look the same as the main menu.
-
@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:
<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
#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
-
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
-
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
-
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")
-
Hello, back here again :|
I'm working on a new site and I'm having trouble with submenu for this kind of menu.
Code:
<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:
<?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.
-
Have a look at the sm2 documentation chapter "Conditional formatting"
Tutorial link removed 404
(quite far down)
[if(class==menu-expand){exp}]
So you can place special classes if an item has sub-items.
But what does this
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.
-
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
<?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">
<?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
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
-
Thank you for answer
I tried with [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
-
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
<?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)
<?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
-
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). :|
<?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..
-
<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:
<?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">'
);
?>
-
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:
<?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.