Probably a simple fix...

Javascript coding ..

Moderators: macek, egami, gesf

pruocco
New php-forum User
New php-forum User
Posts: 4
Joined: Wed Sep 07, 2011 6:37 am

Probably a simple fix...

Postby pruocco » Wed Dec 07, 2011 11:13 am

Hello,
Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit.

When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work?

Thank you in advance for any input!

Code: Select all

function initMenus() {
   $('ul.menu ul').hide();
   $.each($('ul.menu'), function(){
      var cookie = $.cookie(this.id);
      if(cookie === null || String(cookie).length < 1) {
         $('#' + this.id + '.expandfirst ul:first').show();
      }
      else {         
         $('#' + this.id + ' .' + cookie).next().show();
      }
   });
   $('ul.menu li a').click(
      function() {

         var checkElement = $(this).next();
         var parent = this.parentNode.parentNode.id;

         if($('#' + parent).hasClass('noaccordion')) {
            if((String(parent).length > 0) && (String(this.className).length > 0)) {
               if($(this).next().is(':visible')) {
                  $.cookie(parent, null);
               }
               else {
                  $.cookie(parent, this.className);
               }
               $(this).next().slideToggle('normal');
            }            
         }
         if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            if($('#' + parent).hasClass('collapsible')) {
               $('#' + parent + ' ul:visible').slideUp('normal');
            }
            return false;
         }
         if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#' + parent + ' ul:visible').slideUp('normal');
            if((String(parent).length > 0) && (String(this.className).length > 0)) {
               $.cookie(parent, this.className);
            }
            checkElement.slideDown('normal');
            return false;
         }
      }
   );
}
$(document).ready(function() {initMenus();});


Code: Select all

         <ul id="menu1" class="menu" style="margin-top:20px;">
         <li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li>
         <li><a class="m1" href="">WHO WE ARE ...</a>
            <ul><li><a href="">Company Overview</a></li>
               <li><a href="">Clientele</a></li>
               <li><a href="">Multimedia</a></li>
               <li><a href="">Careers</a></li>
               <li><a href="">Contact Us</a></li>
            </ul>
         </li>
         <li><a class="m1" href="">WHAT WE DO ...</a>
            <ul><li><a href="">Promotional Products</a></li>
               <li><a href="">Screen Printing</a></li>
               <li><a href="">Embroidery</a></li>
               <li><a href="">Signage</a></li>
               <li><a href="">Web Design</a></li>
            </ul>
         </li>
         <li><a class="m3" href="">FIND PRODUCTS ...</a>
            <ul><li><a href="">Web Search</a></li>
               <li><a href="">Online Catalogs</a></li>
            </ul>
         </li>
         <li><a class="m4" href="">SUPPORT TOPICS ...</a>
            <ul><li><a href="">General Information</a></li>
               <li><a href="">Available Brands</a></li>
               <li><a href="">Artwork Submissions</a></li>
               <li><a href="">Color & Substrate Charts</a></li>
               <li><a href="">Dartman Game</a></li>
            </ul>
         </li>
         <li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li>
         </ul>


Code: Select all


ul.menu { border-bottom:1px solid #ccc; }

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 240px;
}

ul.menu a {
  display: block;
  text-decoration: none;   
}

ul.menu li {
  margin-top: 0px;
  border-top:1px solid #ccc;
  font-size:10pt;
  font-family: Segoe-B;
}

ul.menu li a {
  background: #fff;
  color: #333;   
  padding: 3px 20px;
}

ul.menu li a:hover {
  background: #2b76b7;
  color:#fff;
}

ul.menu li ul li a {
  background: #fff;
  color: #2b76b7;
  padding-left: 35px;
  font-size:10pt;
  font-family: Segoe-R;
}

ul.menu li ul li a:hover {
  background: #eee;
  border-left: 5px #000 solid;
  padding-left: 25px;
  color:#333;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }

Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest