CMS Made Simple Forums

Posted: **Wed May 25, 2011 1:41 pm**

I've not posted for a while but here's a few CMSMS sites I have been involved with since my last post:

http://www.premier-impact.co.uk
http://www.audenfs.com
http://www.outdoor-revolution.com
http://www.bowmanriley.com
http://www.curvelearning.org.uk
http://www.equalitylaw.co.uk
http://www.eu-careers-online.eu
http://www.lordandmidgley.co.uk
http://www.nchandc.com
http://www.smokefreenorfolk.nhs.uk
http://www.nextlevel.co.uk
http://www.ormandyltd.com
http://www.repatriationhelp.com
http://www.sovereignairmovement.co.uk
http://www.ueaconferences.com
http://www.bmwbikes.co.uk

There are more to come and I'll post them as soon as they are live, but I think this gives a good showcase of how diverse you can be with CMSMS.

Posted: **Sat May 28, 2011 4:20 am**

Very nice clean sites. Can I ask how you created the accordian navigation menu on the www.outdoor-revolution.com website? I'm working on a site with a similar amount of content but little menu space and this would work perfect.

Thank you for any suggestion.

Elkman

Posted: **Sat May 28, 2011 9:07 am**

Thanks.

Here's the global content block code used for the nav:

Code: Select all

{literal}
<__script__ type="text/javascript">
function updateNav(num) {
$('#hidivnum').load('ajax/setCookie.php?num='+num);
}
</__script>
{/literal}


<ul id="accordion-nav">
<li><a href="#new-wave" id="nav-new-wave-awnings" class="heading" onclick="updateNav(0);">
<span class="top"></span>
<span class="main"><span class="text">Traditional Awnings</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div>
</span>
<span class="btm"></span>
</a>
<ul id="new-wave">
{Products category='New Wave Awnings' detailpage='product-detail-new-wave'}
</ul>
</li>
<li><a href="#lightweight" id="nav-lightweight-awnings" class="heading" onclick="updateNav(1);">
<span class="top"></span>
<span class="main"><span class="text">Lightweight Awnings</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div>
</span>
<span class="btm"></span>
</a>
<ul id="lightweight">
{Products category='Lightweight Awnings' detailpage='product-detail'}
</ul>
</li>
<li><a href="#drive-away" id="nav-drive-away-awnings" class="heading" onclick="updateNav(2);">
<span class="top"></span>
<span class="main"><span class="text">Drive Away Awnings</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div></span>
<span class="btm"></span>
</a>
<ul id="drive-away">
{Products category='Drive Away Awnings' detailpage='product-detail'}
</ul>
</li>
<li><a href="#utility-tents" id="nav-utility-tents-awnings" class="heading" onclick="updateNav(3);">
<span class="top"></span>
<span class="main"><span class="text">Utility Tents</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div></span>
<span class="btm"></span>
</a>
<ul id="utility-tents">
{Products category='Utility Tents' detailpage='product-detail'}
</ul>
</li>
<li><a href="#accessories" class="heading" onclick="updateNav(4);">
<span class="top"></span>
<span class="main"><span class="text">Accessories</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div></span>
<span class="btm"></span>
</a>
<ul id="accessories">
{Products category='Accessories' detailpage='product-detail'}
</ul>
</li>
<li><a href="#customer-care" class="heading" onclick="updateNav(5);">
<span class="top"></span>
<span class="main"><span class="text">Customer Care</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div></span>
<span class="btm"></span>
</a>
<ul id="customer-care">
<li>{cms_selflink page="customer-services" text="&raquo; Customer Services"}</li>
<li>{cms_selflink page="instructions" text="&raquo; Instructions"}</li>
<li>{cms_selflink page="frames-carbonlite" text="&raquo; Frames/Carbonlite"}</li>
<li>{cms_selflink page="spares-request-form" text="&raquo; Spares Request Form"}</li>
</ul>
</li>
<li><a href="#downloads" class="heading" onclick="updateNav(6);">
<span class="top"></span>
<span class="main"><span class="text">Downloads</span> <span class="chevrons">&raquo;</span>
<div class="clear"></div></span>
<span class="btm"></span>
</a>
<ul id="downloads">
<li>{cms_selflink page="press-articles" text="&raquo; Press Articles"}</li>
<li>{cms_selflink page="brochure-downloads" text="&raquo; Brochure Downloads"}</li>
</ul>
</li>
</ul>

<div id="hidivnum"></div>

Then all you'd need to include would be call to a bunch of jquery like this:

Code: Select all

<__script__ type="text/javascript" src="scripts/slideFollow/jquery-1.5.js"></__script>
<__script__ type="text/javascript" src="scripts/slideFollow/jquery.easing.1.3.js"></__script>
<__script__ type="text/javascript" src="scripts/slideFollow//jquery.scroll-follow.js"></__script>
<__script__ type="text/javascript" src="scripts/slideFollow/jqueryScroll.js"></__script>
<__script__ src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></__script>
[\code]

Then the CSS, but you can track that down from the source of the site.

I hope that helps.


Thanks
Oliver

Posted: **Sat May 28, 2011 12:13 pm**

Oliver,

Thank you very much for your help!

I'll be rebuilding our local animal rescue website very shortly and will use this menu on their new site. I'll send you a link when it gets going so you can see how your menu will be used. We have adopted four small dogs from this local rescue.

Bill

Posted: **Sun May 29, 2011 6:41 pm**

It's a bit of jquery written for that site. If you look In the source you'll see the link to the featurelist JS file, and the bit of JS in the head to initialise it.

Hope that helps.

CMS Made Simple Forums

A few CMSMS Sites

A few CMSMS Sites

Re: A few CMSMS Sites

Re: A few CMSMS Sites

Re: A few CMSMS Sites

Re: A few CMSMS Sites