18 replies to this topic

[katherholt]

I've used this LightPath 1.1 Snippet a couple of times. Does anyone have any more documentation or examples and help on how to use a pull-down for the children of a folder on the horizontal nav?

http://www.hospitalityhighway.com/ used for top horiz tabs

http://www.visitmetroatlanta.com/411/ - using for top tabs, but wondered if there is a way to show items under the main tab? This one is a redesign I'm working on.

Is there a better menu system I could be using? My most important criteria is that the tab is highlighted as to which page you are on.

[Cris D.]

I've never used LightPath, but...

Mollio menu does that and looks after children and highlights current page as well. If you put the mollio menu inside a div, set position:absolute, you can control placement and z index to achieve the same as what you have now with the additional features you are after. (Pad the cells to get the gap identical to the tabs).

See the alexhillshs site below in my signature for an example of this in action.

Edited by Cris D., 19 July 2007 - 09:20 PM.

[katherholt]

Cris D., on Jul 19 2007, 05:09 PM, said:

I've never used LightPath, but...

Mollio menu does that and looks after children and highlights current page as well. If you put the mollio menu inside a div, set position:absolute, you can control placement and z index to achieve the same as what you have now with the additional features you are after. (Pad the cells to get the gap identical to the tabs).

See the alexhillshs site below in my signature for an example of this in action.

Thank you Chris, I've used Mollio before - and will try again for this web site. I can't seem to find others using LightPath.

[Dean]

It's because it's a snippet I hacked together just to use with the templates i've converted. But it's been a while since i've used it or updated it

[bwoodsdesign]

katherholt, on 19 July 2007 - 11:01 PM, said:

Thank you Chris, I've used Mollio before - and will try again for this web site. I can't seem to find others using LightPath.

Hi katherholt

I've used LightPath multiple times but have the same issue, where I want it to be able to be set as a drop-down style within the < ul > < li > mode of listing menu items.

Were you able to find a solution? I'm working on two sites where I need it to work this way, but in the meantime I've got the menu items loaded manually in HTML instead of the LightPath snippet.

I know that if I modify the snippet call to have &type=hori it works as a plain non-tabbed menu (good for page footers, etc.) but do not see any other variable that I could use to make the items drop-down to show children.

Can anyone offer advice on this?

Here are the two sites I'm working on:

http://www.lukemedicalinc.com

http://www.bwoodsdesign.com/MHS/new

[katherholt]

bwoodsdesign, on 01 July 2010 - 03:59 PM, said:

Hi katherholt

I've used LightPath multiple times but have the same issue, where I want it to be able to be set as a drop-down style within the < ul > < li > mode of listing menu items.

Were you able to find a solution? I'm working on two sites where I need it to work this way, but in the meantime I've got the menu items loaded manually in HTML instead of the LightPath snippet.

I know that if I modify the snippet call to have &type=hori it works as a plain non-tabbed menu (good for page footers, etc.) but do not see any other variable that I could use to make the items drop-down to show children.

Can anyone offer advice on this?

Here are the two sites I'm working on:

http://www.lukemedicalinc.com

http://www.bwoodsdesign.com/MHS/new

I love the 'proDrop' menu snippet and use it on many of my websites.
Example: http://www.visitroswellga.com - is this what you need for functionality? If so, I can provide the snippet for you.
Karen

[bwoodsdesign]

katherholt, on 01 July 2010 - 04:12 PM, said:

I love the 'proDrop' menu snippet and use it on many of my websites.
Example: http://www.visitroswellga.com - is this what you need for functionality? If so, I can provide the snippet for you.
Karen

Hi Karen

I love the functionality of the prodrop menu snippet as you have used it on the Visit Roswell site, but will it respect my css styling as my two sites have? If so, yes, I would love a copy, thanks!

I just did a search for this snippet in the site and only found ProDrop 2.

Can you post a link to it here or send an e-mail?

[katherholt]

bwoodsdesign, on 01 July 2010 - 04:37 PM, said:

Hi Karen

I love the functionality of the prodrop menu snippet as you have used it on the Visit Roswell site, but will it respect my css styling as my two sites have? If so, yes, I would love a copy, thanks!

I just did a search for this snippet in the site and only found ProDrop 2.

Can you post a link to it here or send an e-mail?

ProDrop 2 is the correct menu snippet. I've modified my css a bit to handle word wrapping in the sub-menus and a 'you are here' addition to the top buttons. You will just need to match the style names from the snippet with your css style names.

This website: http://www.bikeroswell.com - uses the same ProDrop 2 snippet without the images.

This website: http://www.advantageseniorcareinc.com - uses the snippet: [[aListApart]] - which you may be easier to use with your current css - only modify to use horizontally.

Karen

Edited by katherholt, 01 July 2010 - 04:47 PM.

[bwoodsdesign]

katherholt, on 01 July 2010 - 04:47 PM, said:

ProDrop 2 is the correct menu snippet. I've modified my css a bit to handle word wrapping in the sub-menus and a 'you are here' addition to the top buttons. You will just need to match the style names from the snippet with your css style names.

This website: http://www.bikeroswell.com - uses the same ProDrop 2 snippet without the images.

This website: http://www.advantageseniorcareinc.com - uses the snippet: [[aListApart]] - which you may be easier to use with your current css - only modify to use horizontally.

Karen

Hi Karen

Is this the one you are referring to?
http://www.etomite.c...h__1#entry46779

Thanks for all your help--btw, your sites are fantastic!

-Bobbi Jo

[katherholt]

bwoodsdesign, on 01 July 2010 - 04:53 PM, said:

Hi Karen

Is this the one you are referring to?
http://www.etomite.c...h__1#entry46779

Thanks for all your help--btw, your sites are fantastic!

-Bobbi Jo

Yes, that is the correct snippet.
Thanks for the compliment.
Karen

[bwoodsdesign]

katherholt, on 01 July 2010 - 05:08 PM, said:

Yes, that is the correct snippet.
Thanks for the compliment.
Karen

Hi Karen

I can't find the alistapart snippet anywhere - even tried Google cache search. Can you post a link or the code here (wrapped in code quoting)? I ask that instead of emailing me so others can benefit.

Thanks for all your help!

-Bobbi Jo

[katherholt]

bwoodsdesign, on 01 July 2010 - 05:22 PM, said:

Hi Karen

I can't find the alistapart snippet anywhere - even tried Google cache search. Can you post a link or the code here (wrapped in code quoting)? I ask that instead of emailing me so others can benefit.

Thanks for all your help!

-Bobbi Jo

Example here: http://www.advantageseniorcareinc.com (left navigation menu)
Here you go:
Call it like this: <div id="menu">[[aListApart]]</div>

#
[[aListApart]]
###########################
#       DOCUMENTATION      #
############################
/*
Snippet name: aListApart
Snippet description:
Generates an alistapart.com's unordered list. No unnesecary classes. 
The only difference is that it uses a class instead of an ID because 
the user can have more menu's. It also has support for weblinks.
*/				
############################
#       SNIPPET CALL       #
############################
/*
Let's say, you want to generate a list of the subdocuments in the 
folder with id 2 (repository for example), you would call:

[[aListApart?id=2]]

Id you don't set an ID:

[[aListApart]]

$standardId will be used (edit it in configuration).

*/
############################
#      CONFIGURATION       #
############################
/*The standard ID if there is no id specified in the snippet call.
This is an integer, a number, so don't use quotes.*/

$standardId = 0;

/*The class to use for the first ul tag. Set to 'id="nav"' if you
have only one ALA menu.*/

$ulTag = 'class="nav"';

/*the tag used for opening a blank window when the document is a
weblink. You can also use ' target="_blank"' if you want, but that
won't be valid html. Refer to the section below on how to do the 
opening of a new window with rel="external". Make sure you use one 
space by the way.*/

$webLink = ' rel="external"';

/*the class or id to use for the current document. Also use a 
space in the begin*/

$currentTag = ' id="current"';
############################
#    HTML STRICT LINKS     #
############################
/* Copy the following code into the head section of your template,
or put it in a seperate .js file if you know how:

<script type="text/javascript">
<!--
function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") 
		&& anchor.getAttribute("rel") == "external")
		anchor.target = "_blank";
	}
}
window.onload = externalLinks
//-->
</script>

That will ensure links with rel="external" will open in new windows.
*/
############################
#     NO EDITING BELOW     #
############################
$id = isset($id) ? $id : $standardId ;
$listLevel = isset($listLevel) ? $listLevel : 0;
$thisSnippet = $etomite->getSnippetName();

$children = $etomite->getActiveChildren($id,'menuindex','ASC','id, pagetitle, description, type, isfolder');
if(!$children) { return '';	}

$output .= $listLevel==0 ? '<ul ' . $ulTag .'>' : '<ul>' ;
$listLevel++;

foreach($children as $child) {
	$linkTitle = $child['description'] ? ' title="' . $child['description'] . '"' : '' ;
	$openWindow = $child['type']=="reference" ? $webLink : '' ;
	$current = $child['id']==$etomite->documentIdentifier ? $currentTag : '' ;
	$output .= '<li><a href="[~' . $child['id'] . '~]"' . $linkTitle . $openWindow . $current . '>' .$child['pagetitle'] . '</a>';
	$output .= $child['isfolder'] ? '[[' . $thisSnippet . '?id=' . $child['id'] . '&listLevel=' . $listLevel . ']]': '' ;
	$output .= '</li>';
}
$output .= '</ul>';
return $output;

[bwoodsdesign]

katherholt, on 01 July 2010 - 05:41 PM, said:

Example here: http://www.advantageseniorcareinc.com (left navigation menu)
Here you go:
Call it like this: <div id="menu">[[aListApart]]</div>

Hi Karen-

Awesome! Way to go. I'll give it a whirl and post my results after the holiday weekend. Big trip to Chicago!

PS - I'm glad you had a copy of this. I keep copies of snippets that I use in a folder in my online back up drive for moments like this, Etomite site doesn't always keep copies of what I need and understandably so, since things are always changing.

My fave and most-oft used are:

ShowDoc - To show content from another doc ID in a template or page
LightPath - (automatic menu implementation, good for clients who add things to the menu and I don't have to manipulate the template code for them)

And a few chunks I use most often that I made myself are LazyYearCopyright (puts in the current year of the copyright into the footer for my client sites so they don't have to change it) a simple contact form (gotten for free at EmailMeform.com), and Google Maps chunk.

Edited by bwoodsdesign, 01 July 2010 - 06:07 PM.

[bwoodsdesign]

katherholt, on 01 July 2010 - 04:47 PM, said:

ProDrop 2 is the correct menu snippet. I've modified my css a bit to handle word wrapping in the sub-menus and a 'you are here' addition to the top buttons. You will just need to match the style names from the snippet with your css style names.

This website: http://www.bikeroswell.com - uses the same ProDrop 2 snippet without the images.

This website: http://www.advantageseniorcareinc.com - uses the snippet: [[aListApart]] - which you may be easier to use with your current css - only modify to use horizontally.

Karen

Hi Karen

I've got the aListApart snippet in place but can't seem to get it to work... I know I need to modify it somehow to be horizontal. Would I use this:

[[aListApart&type=hori]]

...or something like that, in the snippet call of my template, or do I need to modify something in the snippet code itself?

[bwoodsdesign]

bwoodsdesign, on 01 July 2010 - 07:12 PM, said:

Hi Karen

I've got the aListApart snippet in place but can't seem to get it to work... I know I need to modify it somehow to be horizontal. Would I use this:

[[aListApart&type=hori]]

...or something like that, in the snippet call of my template, or do I need to modify something in the snippet code itself?

Nope, that didn't seem to work. Perhaps I need to be re-naming my CSS value for the menu, from "topnav" (which is what my css is called for the UL) to "menu"?

[Dean]

I wrote LightPath, and it hasn't got drop-down functionality.. it's very basic.

For drop-down, I'd recommend the prodrop menu

[bwoodsdesign]

DeanC, on 01 July 2010 - 07:51 PM, said:

I wrote LightPath, and it hasn't got drop-down functionality.. it's very basic.

For drop-down, I'd recommend the prodrop menu

Thanks Dean!

That worked a charm! Perfect. I didn't have to monkey with my current CSS or anything Sweet.

[katherholt]

bwoodsdesign, on 01 July 2010 - 07:12 PM, said:

Hi Karen

I've got the aListApart snippet in place but can't seem to get it to work... I know I need to modify it somehow to be horizontal. Would I use this:

[[aListApart&type=hori]]

...or something like that, in the snippet call of my template, or do I need to modify something in the snippet code itself?

I set up a sample page here:
http://www.bluebonne...t-dropdown.html
It's using your CSS, I just changed the style names from '#topnav' to '#navlist' . Attached is a css file.

Attached Files

•  alistapart.css   1.53K   0 downloads

[bwoodsdesign]

katherholt, on 01 July 2010 - 08:43 PM, said:

I set up a sample page here:
http://www.bluebonne...t-dropdown.html
It's using your CSS, I just changed the style names from '#topnav' to '#navlist' . Attached is a css file.

Thanks, Karen for doing all that for me! I got the nav menu working correctly using Dean's suggestion of the Prodrop snippet.

You can see it in action here > http://www.lukemedicalinc.com