Forums / Developer / Creating a Suckerfish dropdown menu for Ez

Creating a Suckerfish dropdown menu for Ez

Author Message

steve walker

Wednesday 06 July 2005 10:20:13 am

Hi there,

If someone could help out on this bit of coding, I can give a good dropdown suckerfish style menu in the contribs.

The end result I'm after can be seen via:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/

I'm writing the code that creates the bullet list that then becomes the dropdown navigation menu. The code needs to spider the folders, very much like the site map - but has to go beyond just two levels.

Using the sitemap code I have:

{let page_limit=10
     col_count=2
     children=fetch('content','list',hash(parent_node_id,2,limit,$page_limit,offset,$view_parameters.offset))
     child_count=fetch('content','list_count',hash(parent_node_id,$node.node_id))}
<ul id="nav">	 
{section name=Child loop=$children}

   <li><a href={$Child:item.url_alias|ezurl} class="daddy">{$Child:item.name}</a></li>

    {let sub_children=fetch('content','list',hash(parent_node_id,$Child:item.node_id,limit,$page_limit))
         sub_child_count=fetch('content','list_count',hash(parent_node_id,$Child:item.node_id))}

    <ul>
    {section name=SubChild loop=$:sub_children}
    <li><a href={$:item.url_alias|ezurl}>{$:item.name}</a></li>
    {/section}
    </ul>

    {/let}
{/section}
 </ul>
{/let}

The problem is - like I say, only 2 levels - needs to work for three or four.

The second big issue is that the code created for the dropdown needs to be in format:

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#" class="daddy">Remoras</a>

				<ul>
					<li><a href="#" class="daddy">Echeneis</a>
						<ul>
							<li><a href="#">Sharksucker</a></li>
							<li><a href="#">Whitefin Sharksucker</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">Rhombochirus</a>

						<ul>
							<li><a href="#">R. osteochir</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#" class="daddy">Tilefishes</a>
				<ul>

					<li><a href="#">Caulolatilus</a></li>
					<li><a href="#">Lopholatilus</a></li>
					<li><a href="#">Malacanthus</a></li>
				</ul>
			</li>
		</ul>
	</li>

The important bit here is that there needs to be some switch code within the <li> tag that says 'if this node has children, print 'class="daddy"'.

Could anyone show me the code for this?

Much appreciated.

Steve.

http://www.oneworldmarket.co.uk

David Eriksson

Friday 08 July 2005 8:29:06 am

To get more levels, I would think you only need to re-do the loop a few times more within itself. Perhaps you can call on the template from itself, on each of the child nodes or something.

As for you second problem, is this what you are looking for?

{section show=$children|count|gt(0)}class='daddy'{/section}

Count the children, and check if the amount is greater than 0. If so, output code.

/David

/David

steve walker

Friday 08 July 2005 10:10:23 am

Dave,

Thanks for the response - I'll give it another go and let you know how I get on.

Cheers, Steve.

http://www.oneworldmarket.co.uk

steve walker

Saturday 09 July 2005 8:23:08 am

Hurray!

Got this working. Ended up hacking the old style treemenu code.

Have uploaded it a contrib which can be found at:

http://ez.no/community/contribs/template_plugins/suckerfish_dropdown_menu

Be good to hear if it my dodgy instructions make any sense.

Cheers, Steve.

http://www.oneworldmarket.co.uk

eZ debug

Timing: Jan 15 2025 05:41:26
Script start
Timing: Jan 15 2025 05:41:26
Module start 'content'
Timing: Jan 15 2025 05:41:26
Module end 'content'
Timing: Jan 15 2025 05:41:27
Script end

Main resources:

Total runtime0.2676 sec
Peak memory usage6,144.0000 KB
Database Queries134

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0079 691.7422214.7734
Module start 'content' 0.00790.0121 906.5156189.3672
Module end 'content' 0.02000.2475 1,095.88281,481.5391
Script end 0.2675  2,577.4219 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00963.6064200.0005
Check MTime0.00170.6487200.0001
Mysql Total
Database connection0.00060.237410.0006
Mysqli_queries0.201075.11461340.0015
Looping result0.00170.65151310.0000
Template Total0.246492.110.2464
Template load0.00451.675710.0045
Template processing0.241990.393910.2419
Override
Cache load0.00421.563310.0042
Sytem overhead
Fetch class attribute can translate value0.00491.832310.0049
XML
Image XML parsing0.00030.118410.0003
General
dbfile0.00070.2553140.0000
String conversion0.00000.004830.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0002 secs