Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Probably a simple fix...

Javascript coding ..

Moderators: macek, egami, gesf

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; }
pruocco
New php-forum User
New php-forum User
 
Posts: 4
Joined: Wed Sep 07, 2011 6:37 am

Return to JavaScript

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.