Announcement

Collapse
No announcement yet.

Drop down menu no dropping down

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Drop down menu no dropping down

    Hi Guys,

    Please can somebody help????
    Being trying for days to get my drop down navigation to work, it works in preview ect but just stays closed up when uploaded. the site its for is http://www.tentastic.co.uk/index.html and its the left navigation containing the products. I basically want each sections to open up when clicked on the show the sub-sections, e.g.

    Tents
    - 1-2man
    - 3-4 man
    Walking
    Water
    Cooking

    I have used this javascript -

    <script type="text/javascript">


    ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })


    </script>

    And this Html -

    <div class="arrowlistmenu">

    <div class="menuheader expandable"><a href="http://www.tentastic.co.uk/acatalog/Tents.html" target="_self" onmouseover="SwapImage('tent','banners/tent-nav2.gif')"onmouseout="RestoreImage()"><img src="banners/tent-nav.gif" border="0" name="tent"/></a></div>
    <ul class="categoryitems">
    <li><a href="copy_of_Gelert.html">Gelert Tents</a></li>
    <li><a href="ragetents.html">Rage Tents</a></li>
    <li><a href="Coleman_Tents.html">Coleman Tents</a></li>
    <li><a href="Leben-tents.html">Leben Tents</a></li>
    <li><a href="popup.html">Festival & Pop-up Tents</a></li>
    <li><a href="1-2Tent.html">1-2 Man Tents</a></li>
    <li><a href="3-4Tent.html">3-4 Man Tents</a></li>
    <li><a href="5-6Tent.html">5-6 Man Tents</a></li>
    <li><a href="7-8Tent.html">7-8 Man Tents</a></li>
    <li><a href="10-12Tent.html">9+ Man Tents</a></li>
    <li><a href="Family_Tents.html">Family Tents</a></li>
    <li><a href="Windshields.html">Windshields & Canopies</a></li>
    <li><a href="Expedition.html">Light Weight Tents</a></li>
    <li><a href="the_right_tent.html">Choosing The Right Tent</a></li>
    </ul>

    <div class="menuheader expandable"><a href="http://www.tentastic.co.uk/acatalog/Accessories.html" target="_self" onmouseover="SwapImage('camp','banners/camp-nav2.gif')"onmouseout="RestoreImage()"><img src="banners/camp-nav.gif" border="0" name="camp"/></a></div>
    <ul class="categoryitems">
    <li><a href="tent_accessories.html">Tent Accessories</a></li>
    <li><a href="Sleeping_Bags.html">Sleeping Bags</a></li>
    <li><a href="Airbeds_and_Pillows.html">Airbeds & Pillows</a></li>
    <li><a href="Gas_Stove.html">Gas Stoves</a></li>
    <li><a href="Cooking_Sets.html">Cook Sets</a></li>
    <li><a href="Cutlery.html">Cutlery, Plates & Picnics</a></li>
    <li><a href="Coolbags.html">Coolbags & Boxes</a></li>
    <li><a href="Water_storages.html">Water Storage</a></li>
    <li><a href="Torches.html">Torches</a></li>
    <li><a href="Lamps.html">Lamps</a></li>
    <li><a href="Camp_Beds.html">Campbeds & Loungers</a></li>
    <li><a href="Chairs.html">Tables & Chairs</a></li>
    <li><a href="Wardrobes.html">Wardrobes</a></li>
    </ul>


    (thats not all of it just a sample)
    I have also used CSS just to stlye.

    Please can anybody help. This is my first time using Actinic so please be careful with me.

    #2
    Hi Abigail,

    I'm no javascript expert I'm afraid but when I copy your code into my software I get javascript errors ('ddaccordion' is undefined) so I can't test it out unless you post everything to do with this menu.

    Alternatively, you might want to consider one of the menu plug-ins created by Norman Rouxel at http://www.drillpine.biz/actinicstuff/index.html.
    ********************
    Tracey
    SellerDeck

    Comment


      #3
      I think your issue is because you are trying to implement Javascript objects within Scriptaculous framework.
      The important javascript here
      http://www.tentastic.co.uk/js/script...s?load=effects
      that you are calling in the head of your site does not exist.

      i.e. /js/scriptaculous.js does not reside in the /js/ folder on your server.
      Try putting this javascript file into your site1 folder then referencing it directly in the javascript tag in your head i.e.like the actiniccore.js.
      Actinic will handle the paths for you.
      Fergus Weir - teclan ltd
      Ecommerce Digital Marketing

      SellerDeck Responsive Web Design

      SellerDeck Hosting
      SellerDeck Digital Marketing

      Comment

      Working...
      X