PDA

View Full Version : Glossy Accordion Menu



Jekyll
01-22-2009, 08:37 PM
1) Script Title: Glossy Accordion Menu

2) Script URL (on DD):

3) Describe problem:

When I add the "Glossy Accordion Menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm)" or the "Sidebar Menu Apple Style (http://www.kksou.com/php-gtk2/Joomla/Side-Bar-Menu-Apple-style-module.php)" that use the same mootools library that are used by YooTools (http://tools.yootheme.com/), YooTools mods does not work at all.

All Javascript effects and Javascript event are unable.

I looked for some other accordion style menu, but each other i have installed does not let yootools work at all, because it make a conflict between the mootools libraries

Can somebody develop for me a custom accordion style menu that work with YOOTools.

How expensive will be?

Thanks in advance

jscheuer1
01-23-2009, 11:07 AM
"Glossy Accordion Menu" doesn't use mootools, it uses jQuery. It isn't clear from "Sidebar Menu Apple Style" instruction page that you linked to what it uses.

Mootools and jQuery cannot work together on the same page unless one of the jQuery no conflict methods is used for the jQuery script.

But rather than try to explain in detail the how to get jQuery into no conflict mode, two approaches are shown here:

http://www.dynamicdrive.com/forums/showthread.php?p=129936#post129936

they are in relation to a different jQuery script, and the conflict is with a different library (prototype, not mootools), but the principals are the same.

If you want a tailored solution:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Make sure it shows the problem. I don't want a link to a page that has one of the scripts already removed. Make up a separate demo page of the problem if need be.

Jekyll
01-23-2009, 02:05 PM
hi,

thanks for the answer :)

Our website is www.soleadobeach.com where there are the Yootools that uses the mootools libraries and another menu (on the left) accordion menu, that uses another mootools library.

The accordion menu does not let the other yootools work.

Thanks

jscheuer1
01-23-2009, 03:28 PM
I'm not sure what all is supposed to work, but if I simply put the:


<script type="text/javascript" src="http://www.soleadobeach.com/plugins/content/ddaccordion/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="http://www.soleadobeach.com/plugins/content/ddaccordion/ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

before:


<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript" src="http://www.soleadobeach.com/modules/mod_yoo_carousel/mod_yoo_carousel.js"></script>
<script type="text/javascript" src="http://www.soleadobeach.com/modules/mod_yoo_search/mod_yoo_search.js"></script>
<script type="text/javascript" src="http://www.soleadobeach.com/modules/mod_yoo_toppanel/mod_yoo_toppanel.js"></script>

The menu still works and the promozione1/promozione2 thing works too.

BTW, this:


<link type="text/javascript" href="/mootools.js" />
<link type="text/javascript" href="/templates/soleadob/js/accordion.js" />
<link type="text/javascript" href="/templates/soleadob/js/effects.js" />
<link type="text/javascript" href="/templates/soleadob/js/prototype.js" />

does nothing and should be removed.

Jekyll
01-23-2009, 04:14 PM
I've tried but it seems not work.

Can you check if we had installed your module fine?
Can you give us links to download modules and instruction for install it on a Joomla system, so I could try to reinstall.

You have an our mail, too :)

jscheuer1
01-23-2009, 04:20 PM
I only used the resources already on your server. I just moved the code around on the page as noted in my previous post. Here's the demo:

http://home.comcast.net/~jscheuer1/side/soleado_h.htm

Jekyll
01-23-2009, 04:27 PM
there is another problem with the search on the right of the header not solved...

Jekyll
01-23-2009, 04:44 PM
i moved the script in the position you indicate: www.soleadobeach.com but the result is the same.

I not copied the yootools script in the demo page you realized?

jscheuer1
01-23-2009, 04:51 PM
i moved the script in the position you indicate

No you did not. You added it where I indicated, but you also left it where it was. Get rid of (highlighted):


. . . m60"><a href="/solarium.html"><span>Solarium</span></a></li></ul><br />
<div class="module">
<div>
<div>
<div>
<h3>Accordion Menu Apple style</h3>


<!--
Powered by Joomla Gadgets from kksou.com
http://www.kksou.com/php-gtk2/Joomla-Gadgets/
-->

<script type="text/javascript" src="http://www.soleadobeach.com/plugins/content/ddaccordion/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="http://www.soleadobeach.com/plugins/content/ddaccordion/ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", / . . .

Jekyll
01-23-2009, 05:44 PM
very very good!

in order to remove that from my webpage, I had to edit this file:

plugins/content/AccordionMenuApple.php

in order to remove lines you highlined.

now seems it works fine, even yoosearch work correctly.

Jekyll
01-23-2009, 08:16 PM
I'm tring to config it, but i have some doubt.

I set all menu and submenus voice, and set submenu opening on mouse over, but there is not a really correspondence between the position of mouse over and the opening of the submenu.

the same thing happen if i set on click

how can i solve?

jscheuer1
01-24-2009, 04:56 AM
voice?

Jekyll
01-24-2009, 08:01 AM
excuse me, I meant "item".

Are visibles on www.soleadobeach.com, on the left

jscheuer1
01-24-2009, 04:48 PM
You have headers with no submenu divisions, this is messing things up. Add this (highlighted) to the styles:


.applemenu div.silverheader a, em, .silverheader2 a {
background-image: url(http://www.soleadobeach.com/templates/soleadob/images/puls_off.png);
font: normal 12px Verdana;
font-weight: bold;
color: #F7D362;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
height: 22px;
padding-top: 9px;
/* padding-left: 8px; */
text-decoration: none;
text-align:center;
}

Then use it to style the empty headers:


<div class="applemenu">
<div class="silverheader2"><span class="level1"><a href="/pulizia-viso.html">Pulizia Viso</a></span></div>
<div class="silverheader"><em><span class="level1">Massaggi</span></em></div> <div class="submenu"><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/46-circolatorio.html">Circolatorio</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/47-massaggio-linfodrenaggio.html">Linfodrenaggio</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/48-massaggio-tonificanti.html">Tonificanti</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/49-massaggio-anticellulite.html">Anticellulite</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/50-massaggio-algoterapia.html">Algoterapia</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/51-massaggio-fangoterapia.html">Fangoterapia</a></span><br /><span class="level2">
<a href="/">Riflessologia</a></span><br /><span class="level2">
<a href="/">Shiatsu</a></span><br /> </div>
<div class="silverheader2"><span class="level1"><a href="http://www.soleadobeach.com/pedicure/52-pedicure-estetico.html">Pedicure</a></span></div>
<div class="silverheader"><em><span class="level1">Manicure</span></em></div>
<div class="submenu"><span class="level2">
<a href="/">Estetica</a></span><br /><span class="level2">
<a href="/">Ricostruzione Unghie</a></span><br /><span class="level2">
<a href="/">French</a></span><br /> </div>
<div class="silverheader"><em><span class="level1">Trucco</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/trucco-permanente.html">Permanente</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/trucco-sposa.html">Sposa</a></span><br /> </div>
<div class="silverheader"><em><span class="level1">Solarium</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/solarium/56-solarium-trifacciale.html">Trifacciale</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/57-solarium-esafacciale.html">Esafacciale</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/58-solarium-doccia-solare.html">Doccia Solare</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/59-solarium-prodotti-abbronzanti.html">Prodotti Abbronzanti</a></span><br /> </div>
<div class="silverheader2"><span class="level1"><a href="/">FAQ</a></span></div>
<div class="silverheader2"><span class="level1"><a href="/">Parcheggio</a></span></div></div>

Or, just add submenus for the other headers, that is if there is any content for them.

Jekyll
01-25-2009, 04:46 PM
after i add the highlithed text in my css style sheet, where i have to apply the div with that class? to the item with or without the submenu?

jscheuer1
01-25-2009, 04:55 PM
As shown in my post. Or just replace:


<div class="applemenu"><div class="silverheader"><span class="level1"><a href="/pulizia-viso.html">Pulizia Viso</a></span></div><div class="silverheader"><em><span class="level1">Massaggi</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/46-circolatorio.html">Circolatorio</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/47-massaggio-linfodrenaggio.html">Linfodrenaggio</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/48-massaggio-tonificanti.html">Tonificanti</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/49-massaggio-anticellulite.html">Anticellulite</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/50-massaggio-algoterapia.html">Algoterapia</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/massaggi/51-massaggio-fangoterapia.html">Fangoterapia</a></span><br /><span class="level2"> <a href="/">Riflessologia</a></span><br /><span class="level2"> <a href="/">Shiatsu</a></span><br /> </div><div class="silverheader"><span class="level1"><a href="http://www.soleadobeach.com/pedicure/52-pedicure-estetico.html">Pedicure</a></span></div><div class="silverheader"><em><span class="level1">Manicure</span></em></div> <div class="submenu"><span class="level2"> <a href="/">Estetica</a></span><br /><span class="level2"> <a href="/">Ricostruzione Unghie</a></span><br /><span class="level2"> <a href="/">French</a></span><br /> </div><div class="silverheader"><em><span class="level1">Trucco</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/trucco-permanente.html">Permanente</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/trucco-sposa.html">Sposa</a></span><br /> </div><div class="silverheader"><em><span class="level1">Solarium</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/solarium/56-solarium-trifacciale.html">Trifacciale</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/solarium/57-solarium-esafacciale.html">Esafacciale</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/solarium/58-solarium-doccia-solare.html">Doccia Solare</a></span><br /><span class="level2"> <a href="http://www.soleadobeach.com/solarium/59-solarium-prodotti-abbronzanti.html">Prodotti Abbronzanti</a></span><br /> </div><div class="silverheader"><span class="level1"><a href="/">FAQ</a></span></div><div class="silverheader"><span class="level1"><a href="/">Parcheggio</a></span></div></div>

with:


<div class="applemenu">
<div class="silverheader2"><span class="level1"><a href="/pulizia-viso.html">Pulizia Viso</a></span></div>
<div class="silverheader"><em><span class="level1">Massaggi</span></em></div> <div class="submenu"><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/46-circolatorio.html">Circolatorio</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/47-massaggio-linfodrenaggio.html">Linfodrenaggio</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/48-massaggio-tonificanti.html">Tonificanti</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/49-massaggio-anticellulite.html">Anticellulite</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/50-massaggio-algoterapia.html">Algoterapia</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/massaggi/51-massaggio-fangoterapia.html">Fangoterapia</a></span><br /><span class="level2">
<a href="/">Riflessologia</a></span><br /><span class="level2">
<a href="/">Shiatsu</a></span><br /> </div>
<div class="silverheader2"><span class="level1"><a href="http://www.soleadobeach.com/pedicure/52-pedicure-estetico.html">Pedicure</a></span></div>
<div class="silverheader"><em><span class="level1">Manicure</span></em></div>
<div class="submenu"><span class="level2">
<a href="/">Estetica</a></span><br /><span class="level2">
<a href="/">Ricostruzione Unghie</a></span><br /><span class="level2">
<a href="/">French</a></span><br /> </div>
<div class="silverheader"><em><span class="level1">Trucco</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/trucco-permanente.html">Permanente</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/trucco-sposa.html">Sposa</a></span><br /> </div>
<div class="silverheader"><em><span class="level1">Solarium</span></em></div> <div class="submenu"><span class="level2"> <a href="http://www.soleadobeach.com/solarium/56-solarium-trifacciale.html">Trifacciale</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/57-solarium-esafacciale.html">Esafacciale</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/58-solarium-doccia-solare.html">Doccia Solare</a></span><br /><span class="level2">
<a href="http://www.soleadobeach.com/solarium/59-solarium-prodotti-abbronzanti.html">Prodotti Abbronzanti</a></span><br /> </div>
<div class="silverheader2"><span class="level1"><a href="/">FAQ</a></span></div>
<div class="silverheader2"><span class="level1"><a href="/">Parcheggio</a></span></div></div>

Jekyll
01-25-2009, 07:07 PM
ok,

I copied code you wrote, but it does not work fine as you can see on the website.
I'm using accordion menu under Joomla.. e seems your code is not correctly read by joomla

jscheuer1
01-25-2009, 09:02 PM
You must have misunderstood.

See this demo:

http://home.comcast.net/~jscheuer1/side/soleado_h.htm

Use your browser's 'view source' to see how I've done the code.