Page 1 of 1
showing child menu items and bolding external links
Posted: Fri May 16, 2008 3:37 pm
by dpakman91
let's say i have a parent like "videos" in my menu, and inside of it are three subtopics. how can i make it so the three subtopics show by default in the menu without first having to click the parent link?
also, how can i make all external links appear as bold text?
Re: showing child menu items and bolding external links
Posted: Fri May 16, 2008 6:03 pm
by Nullig
To show all menu items, you could add:
collapse='0'
to the menu call in your template.
To bold external links, enclose them in or or add:
a.external {font-weight: bold;}
to your stylesheet.
Nullig
Re: showing child menu items and bolding external links
Posted: Fri May 16, 2008 6:17 pm
by dpakman91
where would i add collapse="0"?
additionally, what if i just want to show all menu items that are child to ONE menu section, but not another?
Re: showing child menu items and bolding external links
Posted: Fri May 16, 2008 6:22 pm
by Nullig
You add it within the {menu} tag in your template.
I suggest you read the help for Menu Manager, it explains exactly how to format your menu.
Nullig
Re: showing child menu items and bolding external links
Posted: Fri May 16, 2008 6:48 pm
by dpakman91
alright. if i want to create a section header, but have it be formatted just like my regular menu items, just not include any content, how would i do that? basically just make a section header have the same font and look as regular menu items that are content pages.
Re: showing child menu items and bolding external links
Posted: Sat May 17, 2008 4:16 am
by Dr.CSS
Add it as a page then when you render a page, look at it in a browser, look at the page source to see how it is called in the menu template, ID or class etc., then use that to add a style in your CSS tagging it using the same CSS as your regular menu items, copy/paste the normal CSS then put the section header call/ID/class in front of it...
Re: showing child menu items and bolding external links
Posted: Sat May 17, 2008 10:23 pm
by dpakman91
mark wrote:
Add it as a page then when you render a page, look at it in a browser, look at the page source to see how it is called in the menu template, ID or class etc., then use that to add a style in your CSS tagging it using the same CSS as your regular menu items, copy/paste the normal CSS then put the section header call/ID/class in front of it...
i know i'm new at this, but i don't understand exactly what you mean. can you tell me in a little more detail?
Re: showing child menu items and bolding external links
Posted: Sun May 18, 2008 6:08 am
by Dr.CSS
Lets say you use the simple_navigation template the current page is set as an h3...
{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}
The sectionheader is set as li.sectionheader with just text no wrap...
{elseif $node->type == 'sectionheader'}
{$node->menutext}
The default CSS for a shows...
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #18507C; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}
And the others are...
Current page first level...
div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
background-color: #385C72;
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for */
margin: 0; /* as normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
So if you want them all the same copy the one you like and paste it where the others are...