/    Sign up×
Community /Pin to ProfileBookmark

Accordion Simplified

Copy linkTweet thisAlerts:
Sep 22.2009

Wondering if anyone can shave out some of this extra Cr@p for me,
AKA levels 1-etc into maybe just “level” here’s the codes

PHP Generator: (adding extra Parent tags ATM)

[code=php]
 //output menu function
function outputMenu ($array, $level, $indent=0) {
global $levelMarker;

$prefix = “”;
for ($i=0; $i<$indent; $i++) {
$prefix .= ” “;
}

echo $prefix . “<ul class=”parent”>rn”;
foreach ($array as $key => $value) {
if (is_array($value)) {
echo $prefix . “<ul class=’level” . $levelMarker . ” marker’>r”;
echo $prefix . “<li><a class=”parent” href=”#”>” . $key . “</a>r”;
outputMenu($value, $indent++, $levelMarker++);

} else {
echo $prefix . “<li class=”tack”><a href='” . $value . “‘>” . $key . “</a></li>r”;
}
}
echo $prefix . “</ul></li></ul>”;
echo “rnrn”; # Orderly
$levelMarker–;
}

//output menu settings
$levelMarker = 1;

//output menu
outputMenu($menu, $level);
[/code]

Outputs this horrendous looking ish’
I tried using the class’ Marker/Tack
to trick my Plus, Empty and Block
images to no success:

[code=html]
<ul class=’level1 marker’>
<li><a class=”parent” href=”#”>Products</a>
<ul class=”parent”>
<ul class=’level2 marker’>

<li><a class=”parent” href=”#”>Lighting</a>
<ul class=”parent”>
<ul class=’level3 marker’>
<li><a class=”parent” href=”#”>PR Lighting</a>
<ul class=”parent”>
<li class=”tack”><a href=’prl-ar.php’>Architectural</a></li>
<li class=”tack”><a href=’prl-cp.php’>Centerpieces</a></li>

<li class=”tack”><a href=’prl-dj.php’>DJ Pro Series</a></li>
<ul class=’level4 marker’>
<li><a class=”parent” href=”#”>Theatrical</a>
<ul class=”parent”>
<li class=”tack”><a href=’prl-fs.php’>Followspots</a></li>
</ul></li></ul>

<ul class=’level4 marker’>

<li><a class=”parent” href=”#”>Moving Yoke</a>
<ul class=”parent”>
<li class=”tack”><a href=’prl-xl.php’>XL Series</a></li>
<li class=”tack”><a href=’prl-xs.php’>XS Series</a></li>
<li class=”tack”><a href=’prl-pt.php’>Pilot Series</a></li>
<li class=”tack”><a href=’prl-so.php’>Solo Series</a></li>

</ul></li></ul>

</ul></li></ul>

<ul class=’level3 marker’>
<li><a class=”parent” href=”#”>Omni Lighting</a>
<ul class=”parent”>
<li class=”tack”><a href=’lit-ar.php’>Architectural</a></li>
<li class=”tack”><a href=’lit-cp.php’>Centerpieces</a></li>

<ul class=’level4 marker’>
<li><a class=”parent” href=”#”>Effect Lighting</a>
<ul class=”parent”>
<li class=”tack”><a href=’lit-ad.php’>Advancer Series</a></li>
<li class=”tack”><a href=’lit-as.php’>American Series</a></li>
<li class=”tack”><a href=’lit-ss.php’>Star Series</a></li>
</ul></li></ul>

<li class=”tack”><a href=’lit-fo.php’>Fiber Optics</a></li>
<li class=”tack”><a href=’lit-il.php’>Intelligent</a></li>
<li class=”tack”><a href=’lit-sl.php’>Searchlights</a></li>
<li class=”tack”><a href=’lit-se.php’>Special Effects</a></li>
<li class=”tack”><a href=’lit-uv.php’>UV Fictures</a></li>
<li class=”tack”><a href=’lit-st.php’>Stands</a></li>

</ul></li></ul>

</ul></li></ul>

<ul class=’level2 marker’>
<li><a class=”parent” href=”#”>LED</a>
<ul class=”parent”>
<li class=”tack”><a href=’led-fx.php’>Effects</a></li>
<li class=”tack”><a href=’led-pc.php’>Par Cans</a></li>

<li class=”tack”><a href=’led-my.php’>Moving Yoke</a></li>
<li class=”tack”><a href=’led-sp.php’>Strips</a></li>
<li class=”tack”><a href=’led-ps.php’>Panels</a></li>
<li class=”tack”><a href=’led-vw.php’>Video Walls</a></li>
</ul></li></ul>

<ul class=’level2 marker’>

<li><a class=”parent” href=”#”>Lasers</a>
<ul class=”parent”>
<li class=”tack”><a href=’lsr-pr.php’>Professional</a></li>
<li class=”tack”><a href=’lsr-sp.php’>Semi-Professional</a></li>
<li class=”tack”><a href=’lsr-dj.php’>DJ &amp; Club</a></li>
<li class=”tack”><a href=’lsr-la.php’>Accessories</a></li>

</ul></li></ul>

[/code]

CSS:

[code=html]
 /* Begin Accordion */
.bg {padding-bottom:10px; margin-left:1px; position:relative; background-color:rgb(18,18,18); }
.bg ul {background-color:rgb(18,18,18);}
.bg li {background-color:rgb(18,18,18);}

.level1 {
font-weight:bold;
text-align:left;
}

.level1 li {
margin-left:2px;
text-align:left;

}

.level2 {
font-weight:normal;
text-align:left;
padding:2px;
}

.level2 li {
margin-left:2px;
padding-left:11px;
background-repeat:no-repeat;
/* background-image:url(http://omnisistem.com/images/bg_list2.gif);
*/
}
.level3 {
font-weight:normal;
text-align:left;
}

.level3 li {
margin-left:2px;
padding-left:11px;
background-repeat:no-repeat;
padding:auto 2px;
}

.level4 {
font-weight:normal;
text-align:left;
padding:2px;
}

.level4 li {
margin-left:2px;
padding-left:11px;
background-repeat:no-repeat;
padding:auto 2px;
}

.level1 li a, .level2 li a {
padding-left:18px;
background-image:url(http://omnisistem.com/images/plus.gif);
background-position:4px 3px;
background-repeat:no-repeat;
padding:auto 2px;
overflow:hidden;
}

.level3 li a {
padding-left:18px;
background-image:url(http://omnisistem.com/images/square.gif);
background-position:4px 3px;
background-repeat:no-repeat;
padding:auto 2px;

}

.level4 li a {
padding-left:18px;
background-image:url(http://omnisistem.com/images/square.gif);
background-position:4px 3px;
background-repeat:no-repeat;

}

.level4 li a.selected, .level3 li a.selected, .level1 li a.selected, .level2 li a.selected {
padding-left:18px;
background-position:0 4px;
background-image:url(http://omnisistem.com/images/square_sel.gif);
background-repeat:no-repeat;

}

.level3 a.parent {
padding-left:18px;
background-image:url(http://omnisistem.com/images/plus.gif);
background-position:0 4px;
background-repeat:no-repeat;

}

.level3 li a.selected {
padding-left:18px;
background-position:0 4px;
background-image:url(http://omnisistem.com/images/square_sel.gif);
background-repeat:no-repeat;

}

.level4 li a.selected {
padding-left:18px;
background-position:0 4px;
background-image:url(http://omnisistem.com/images/square_sel.gif);
background-repeat:no-repeat;

}

.parent a {
margin:<?php if ($b == “IE”) echo “0px 1px 0px 14px;n”; else echo “0px 1px 2px 14px;n”; ?>
overflow:hidden;
}

li a:link, li a:visited {
color:#fff;
font-family:arial;
font-size:73&#37;;
text-decoration:none;
display:<?php if ($b == “IE” || “SAFARI” || “FIREFOX”) echo “block;n”; else echo “compact;n”; ?>
}

li a:hover {
color:#f4036e;
font-weight:bold;
letter-spacing:-1px;
text-decoration:none;
}
[/code]

cont’d

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ehimeauthorSep 22.2009 — JQuery Coding: (Brownie points if you can get it to remember the last used link!! I tried 5 diff methods to no success.... ?)
<i>
</i> &lt;script type="text/javascript"&gt;
jQuery().ready(function(){
var items = $("#parent a").click(function(){ items.removeClass("selected");
$(this).addClass("selected"); });
$('.level1').Accordion({
active: 'a.selected',
header: 'a.parent',
alwaysOpen: false,
animated: 'easeslide'});

<i> </i> $('.level2').Accordion({
<i> </i> active: 'a.selected',
<i> </i> header: 'a.parent',
<i> </i> alwaysOpen: false,
<i> </i> animated: 'easeslide'});

<i> </i> $('.level3').Accordion({
<i> </i> active: 'a.selected',
<i> </i> header: 'a.parent',
<i> </i> alwaysOpen: false,
<i> </i> animated: 'easeslide'});

<i> </i> $('.level4').Accordion({
<i> </i> active: 'a.selected',
<i> </i> header: 'a.parent',
<i> </i> alwaysOpen: false,
<i> </i> animated: 'easeslide'});

<i> </i> $('.level5').Accordion({
<i> </i> active: 'a.selected',
<i> </i> header: 'a.parent',
<i> </i> alwaysOpen: false,
<i> </i> animated: 'easeslide'});

<i> </i> $('.level6').Accordion({
<i> </i> active: 'a.selected',
<i> </i> header: 'a.parent',
<i> </i> alwaysOpen: false,
<i> </i> animated: 'easeslide'});

<i> </i> $("a.parent").click(function(event){
<i> </i> window.location.hash=this.hash;
<i> </i> });

<i> </i> });
<i> </i> &lt;/script&gt;


PHP Menu Array:
[code=php]
$menu = array(
"Products" => array (

"Lighting" => array( "PR Lighting" => array( "Architectural" => "prl-ar.php",
"Centerpieces" => "prl-cp.php",
"DJ Pro Series" => "prl-dj.php",
"Theatrical" => array( "Followspots" => "prl-fs.php",
),

"Moving Yoke" => array( "XL Series" => "prl-xl.php",
"XS Series" => "prl-xs.php",
"Pilot Series" => "prl-pt.php",
"Solo Series" => "prl-so.php",
),
),

"Omni Lighting" => array( "Architectural" => "lit-ar.php",
"Centerpieces" => "lit-cp.php",
"Effect Lighting" => array( "Advancer Series" => "lit-ad.php",
"American Series" => "lit-as.php",
"Star Series" => "lit-ss.php",
),

"Fiber Optics" => "lit-fo.php",
"Intelligent" => "lit-il.php",
"Searchlights" => "lit-sl.php",
"Special Effects" => "lit-se.php",
"UV Fictures" => "lit-uv.php",
"Stands" => "lit-st.php",
),
),

"LED" => array( "Effects" => "led-fx.php",
"Par Cans" => "led-pc.php",
"Moving Yoke" => "led-my.php",
"Strips" => "led-sp.php",
"Panels" => "led-ps.php",
"Video Walls" => "led-vw.php",
),

"Lasers" => array( "Professional" => "lsr-pr.php",
"Semi-Professional" => "lsr-sp.php",
"DJ &amp; Club" => "lsr-dj.php",
"Accessories" => "lsr-la.php",
),

"Omni Cables" => array( "All Cables" => "cbl-al.php",
),

"Omni Cases" => array( "Hard" => "css-hd.php",
"Soft" => "css-sf.php",
"Road" => "css-rd.php",
"Flight" => "css-fl.php",
),

"Omni Sound" => array( "PA Systems" => "snd-ra.php",
"SS/SB Series" => "snd-es.php",
"EJ Series" => "snd-ej.php",
"U Series" => "snd-us.php",
"Xi Series" => "snd-xi.php",
"Electronics" => "snd-el.php",
),

"Truss Sistem" => array( "Clamps" => "trs-cl.php",
"Truss" => "trs-tr.php",
),

"Mirror Products" => array( "Mirror Balls" => "mrr-bl.php",
"Mirror Cylinders" => "mrr-cl.php",
"Motors" => "mrr-mr.php",
),

"Special Effects" => array( "Fog/Haze" => "sfx-fh.php",
"Bubble" => "sfx-bb.php",
"Snow/Foam" => "sfx-sf.php",
"Accessories" => "sfx-sf.php",
),

"Elevators" => array( "Video Elevators" => "elv-ve.php",
"Elevator Lifts" => "elv-el.php",
),

"Controllers" => array( "Wireless" => "ctl-wi.php",
"DMX Controls" => "ctl-dx.php",
"DasLight" => "ctl-dl.php",
),

"DJ Consoles" => array( "Stands" => "cnl-st.php",
),

"Furniture" => array( "Tables" => "frn-tb.php",
"Chairs" => "frn-ch.php",
"Barstools" => "frn-bs.php",
),
),
);
[/code]

And an Example of how it works now (Above code has yet to be implemented)

http://omnisistem.com
×

Success!

Help @ehime spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...