Link to home
Start Free TrialLog in
Avatar of upchelpdesk
upchelpdesk

asked on

Jquery Toggle Menu - I need link to not open menu

Hi,

I have this jquery code that opens the menu on click, inside a h2 element.  I also have a link inside that element.  When I user clicks the link I need it to not open the menu (which it does now) but just go to the linked page.  If possible I would just like the image of the down arrow to expand the menu.    

See my code below.  

you can view the site at http://webdev.upc.org 

Thanks,

Kevin  


$(document).ready(function () {
           $('ul.drawer-expand').hide(); // hide all uls inside li.drawer
           $('h2.drawer-handle:eq(6)').css({ 'border-bottom': 'none' }); //set Ministries menu border to none
                      // switch (window.location.pathname) {
               //case '/': case '/home.aspx':
//
                 //  break;
            var URL = window.location.pathname;
           switch (true) {
               case URL.indexOf("/newhere") > -1: case URL.indexOf("/Newhere") > -1:
                   $('ul.drawer-expand:eq(0)').show(); //show first menu
               $('h2.drawer-handle:eq(0)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF'  }); //change color and height of open menu
               $('h2.drawer-handle:eq(0)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
               $('h2.drawer-handle:gt(0)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
               $('h2.drawer-handle:gt(0)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
               $('h2.drawer-handle:gt(0)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;

               case URL.indexOf("/worship") > -1: case URL.indexOf("/Worship") > -1: 
               //case '/worship.aspx': case '/worship/sundays.aspx': case '/worship/childcare.aspx': case '/worship/series.aspx': case '/worship/studyguides.aspx': case '/worship/music.aspx': case '/worship/union.aspx':
                   $('ul.drawer-expand:eq(1)').show(); //show second menu
                   // $('li.drawer ul:visible').addClass("MarkPage"); 
                   // $('ul.drawer-expand:eq(1)').addClass("MarkPage");
                   //document.getElementById(menu2).setAttribute("class", "firstmenutext"); 
                   $('h2.drawer-handle:eq(1)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF' }); //change color and height of open menu
                   $('h2.drawer-handle:eq(1)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(1)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(1)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(1)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(1)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(1)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(1)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;
               case URL.indexOf("/community") > -1: case URL.indexOf("/Community") > -1: 
               //case '/community.aspx': case '/community/classes.aspx': case '/community/events.aspx': case '/community/baptism.aspx': case '/community/classes.aspx': case '/community/membership.aspx': case '/community/caring.aspx':
                   $('ul.drawer-expand:eq(2)').show(); //show third menu
                   $('h2.drawer-handle:eq(2)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF'  }); //change color and height of open menu
                   $('h2.drawer-handle:eq(2)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(2)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(2)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(2)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(2)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(2)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(2)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;
               case URL.indexOf("/serve") > -1: case URL.indexOf("/Serve") > -1: 
               case '/serve.aspx': case '/serve/upc.aspx': case '/serve/seattle.aspx': case '/serve/world.aspx':
                   $('ul.drawer-expand:eq(3)').show(); //show forth menu
                   $('h2.drawer-handle:eq(3)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF'  }); //change color and height of open menu
                   $('h2.drawer-handle:eq(3)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(3)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(3)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(3)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(3)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(3)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(3)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;
               case URL.indexOf("/give") > -1: case URL.indexOf("/Give") > -1:
               //case '/give.aspx':
                   $('ul.drawer-expand:eq(4)').show(); //show fifth menu
                   $('h2.drawer-handle:eq(4)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF'  }); //change color and height of open menu
                   $('h2.drawer-handle:eq(4)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(4)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(4)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(4)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(4)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(4)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(4)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;
               case URL.indexOf("/smallgroups") > -1: case URL.indexOf("/Smallgroups") > -1: 
               //case '/smallgroups.aspx': case '/smallgroups/join.aspx': case '/smallgroups/facilitators.aspx': case '/smallgroups/studyguides.aspx': case '/smallgroups/serving.aspx':
                   $('ul.drawer-expand:eq(5)').show(); //show sixth menu
                   $('h2.drawer-handle:eq(5)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF'  }); //change color and height of open menu
                   $('h2.drawer-handle:eq(5)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(5)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(5)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(5)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(5)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(5)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(5)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;
               case URL.indexOf("/ministries") > -1: case URL.indexOf("/umin") > -1: case URL.indexOf("/cfm") > -1: case URL.indexOf("/ymm") > -1: case URL.indexOf("/adults") > -1: case URL.indexOf("/convergence") > -1: case URL.indexOf("/outreach") > -1: case URL.indexOf("/sbs") > -1: case URL.indexOf("/hospitality") > -1: case URL.indexOf("/Ministries") > -1: case URL.indexOf("/Umin") > -1: case URL.indexOf("/CFM") > -1: case URL.indexOf("/YMM") > -1: case URL.indexOf("/Adults") > -1: case URL.indexOf("/Convergence") > -1: case URL.indexOf("/Outreach") > -1: case URL.indexOf("/SBS") > -1: case URL.indexOf("/Hospitality") > -1:
                   //case '/ministries.aspx':
                   $('ul.drawer-expand:eq(6)').show(); //show seventh menu
                   $('h2.drawer-handle:eq(6)').css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF' }); //change color and height of open menu
                   $('h2.drawer-handle:eq(6)').find('img').attr("src", "/images/skin_images/DownArrow.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(6)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:lt(6)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:lt(6)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   $('h2.drawer-handle:gt(6)').css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
                   $('h2.drawer-handle:gt(6)').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
                   $('h2.drawer-handle:gt(6)').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
                   break;


               //etc    
               default:
                   //$('ul.drawer-expand:eq(0)').show(); //show first menu
           }
           $('h2.drawer-handle').click(function () {
               $('li.drawer ul:visible').slideUp(100).prev().removeClass('open').addClass("MarkClosed");
               $(this).not(".MarkClosed").addClass('open').next().slideDown(100); // open the clicked menu
               $('h2.drawer-handle').find('img').attr("src", "/images/skin_images/RightArrow_Small.png"); // change all closed menus to small image
               $(this).not(".MarkClosed").find('img').attr("src", "/images/skin_images/DownArrow.png"); // change open menu image 
               $('h2.drawer-handle').find('img').css({ 'border': '0', 'position': 'relative', 'top': '1px', 'left': '0' }); // change postion of closed menu image
               $(this).not(".MarkClosed").find('img').css({ 'border': '0', 'position': 'relative', 'top': '6px', 'left': '0' }); // change position of open menu image
               $("h2.drawer-handle").css({ 'background-color': '#FFFFFF', 'height': '20px', 'border-bottom': '1px solid #EFEFF0' }); // change height of closed image menu
               $(this).not(".MarkClosed").css({ 'background-color': '#EFEFF0', 'height': '30px', 'color': '#FFFFFF' }); //change color and height of open menu
               if ($(this).not(".MarkClosed").html() == null) { // if menu is completely closed - reset
                   $('h2.drawer-handle').find('img').attr("src", "/images/skin_images/RightArrow.png"); // reset image
                   $('h2.drawer-handle').css({ 'background-color': '#FFFFFF', 'height': '30px', 'border-bottom': '1px solid #EFEFF0' }); // reset height, color, and border
                   $('h2.drawer-handle').find('img').css({ 'border': '0', 'position': 'relative', 'top': '6px', 'left': '0' }); // reset image position
               }

               $(".MarkClosed").removeClass("MarkClosed"); // remove MarkClosed class 
           });
       });
    //-->   


     </SCRIPT>

Open in new window

HTML

<div class="menupadding">
	 <hr class="menu_ln" />
        <ul class="drawers">
        <li class="drawer" style="position: static; ">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="firstmenutext"><a href="/newhere.aspx">NEW HERE?</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/newhere/children.aspx" id="nChildcare">Children's Care & Classes</a> </li>
        <li class="drawerssub"><a href="/newhere/parking.aspx" id="nParking">Parking & Directions</a> </li>
        <li class="drawerssub"><a href="/newhere/connect.aspx" id="nCommunity">Connect to Community</a> </li>
        <li class="drawerssub"><a href="/newhere/esl.aspx" id="nESL">ESL & Internationals</a> </li>
        <hr class="menu_bt_ln" />
            </ul>
        </li>
        <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext" id="menu2"><a href="/worship.aspx">WORSHIP</a></span></h2>
            <ul class="drawer-expand">
         <li class="drawerssub"><a href="/worship/sundays.aspx" id="wSundays">Sunday Worship</a> </li>
        <li class="drawerssub"><a href="/worship/childcare.aspx" id="wChildCare">Children's Care & Classes</a> </li>
        <li class="drawerssub"><a href="/worship/studyguides.aspx" id="wSeries">Sermon Series & Study Guides</a> </li>
        <li class="drawerssub"><a href="/worship/audio.aspx" id="wListen">Listen Online</a> </li>
        <li class="drawerssub"><a href="/worship/music.aspx" id="wMusic">Music & Choirs</a> </li>
        <li class="drawerssub"><a href="/worship/union.aspx" id="wUnion">Worship at Union Campus</a> </li>
        <hr class="menu_bt_ln" />

            </ul>
        </li>
                <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext"><a href="/community.aspx">CONNECT TO COMMUNITY</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/community/classes.aspx" id="cClasses">Classes</a> </li>
        <li class="drawerssub"><a href="/community/events.aspx" id="cEvents">Events</a> </li>
        <li class="drawerssub"><a href="/community/baptism.aspx" id="cBaptisms">Baptism</a> </li>
        <li class="drawerssub"><a href="/community/membership.aspx" id="cMembership">Membership</a> </li>
        <li class="drawerssub"><a href="/community/caring.aspx" id="cCaring">Caring Ministries and Resources</a> </li> 
         <li class="drawerssub"><a href="/community/calendar.aspx" id="cCalendar">Calendar</a> </li> 
        <hr class="menu_bt_ln" />
            </ul>
        </li>
        <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext"><a href="/serve.aspx">SERVE</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/serve/upc.aspx" id="sUPC">Serve UPC</a> </li>
        <li class="drawerssub"><a href="/serve/city.aspx"id="sCity">Serve the City</a> </li>
        <li class="drawerssub"><a href="/serve/world.aspx" id="sWorld">Serve the World</a> </li>
        <hr class="menu_bt_ln" />
            </ul>
            </li>
         <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext"><a href="/give.aspx">GIVE</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/give/online.aspx" id="gOnline">Online Giving</a> </li>
        <li class="drawerssub"><a href="/give/financial.aspx" id="gFinancial">Financial Support</a> </li>
        <li class="drawerssub"><a href="/give/kind.aspx" id="gGifts">Gifts in Kind</a> </li>
        <li class="drawerssub"><a href="/give/stewardship.aspx" id="gStewardship">Stewardship Philosophy</a> </li>
        <hr class="menu_bt_ln" /> 
            </ul>
            </li>
                  <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext"><a href="/smallgroups.aspx">SMALL GROUPS</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/smallgroups/join.aspx" id="sJoin">Join a Group</a> </li>
        <li class="drawerssub"><a href="/smallgroups/facilitators.aspx" id="sFacilitators">For Group Facilitators</a> </li>
        <li class="drawerssub"><a href="/smallgroups/studyguides.aspx" id="sStudyGuides">Study Guides & Audio</a> </li>
        <li class="drawerssub"><a href="/smallgroups/serving.aspx" id="sIdeas">Ideas for Serving Together</a> </li>
         <li class="drawerssub"><a href="/smallgroups/about.aspx" id="sAbout">About Small Groups</a> </li>
         <hr class="menu_bt_ln" />
            </ul>
            </li>
            <li class="drawer">
            <h2 class="drawer-handle"><img src="/images/skin_images/RightArrow.png" style="border: 0; position: relative; top: 6px; left: 0;" />     <span class="menutext"><a href="/ministries.aspx">MINISTRIES</a></span></h2>
            <ul class="drawer-expand">
        <li class="drawerssub"><a href="/community/caring.aspx" id="mCaring">Caring Ministries & Resources</a> </li>
        <li class="drawerssub"><a href="/cfm.aspx" id="mCFM">Children & Families</a> </li>
        <li class="drawerssub"><a href="/esl.aspx" id="mESL">ESL & Internationals</a> </li>
        <li class="drawerssub"><a href="/secondwind.aspx" id="mSecondWind">50+</a> </li>
        <li class="drawerssub"><a href="/hospitality.aspx" id="mHospitality">Hospitality</a> </li>  
        <li class="drawerssub"><a href="/marriage.aspx" id="mMarriage">Marriage Ministry</a> </li>
        <li class="drawerssub"><a href="/outreach.aspx" id="mOutreach">Outreach</a> </li>
        <li class="drawerssub"><a href="/sbs.aspx" id="mSBS">Side-by-Side</a> </li>
        <li class="drawerssub"><a href="/convergence.aspx" id="mConvergence">20/30s</a> </li>
        <li class="drawerssub"><a href="http://www.unionchurchseattle.org" id="mUnion" target="_blank">Union Campus</a> </li>    
        <li class="drawerssub"><a href="/umin.aspx" id="mUMin">University</a> </li>
        <li class="drawerssub"><a href="/ymm.aspx" id="mYMM">Youth</a> </li>
         <!--<hr class="menu_bt_ln" /> -->
            </ul>
        </li>
    </ul>
   	 <hr class="menu_ln" />

    </div>



CSS

  UL LI.drawers {
        width: 245px;
       padding-bottom: 10px;
         list-style: none;
         cursor: pointer;
         
    }
    
  
    UL LI {
      
      

    }

   
    
  
    UL LI.drawer {
        list-style: none;
        margin: 0;
        padding-right: 5px;
 cursor: pointer;   
    }
    
    
    ul.drawer-expand 
    {
        display: none;
        
    }
    
        LI.drawerssub {
        text-decoration: none;
        color: #717171;
        list-style: none;
        padding-left: 15px;
        cursor: pointer;
        
    }
    
    LI.drawerssub a:link {
        text-decoration: none;
        color: #717171;
        list-style: none;
        font-size: 9pt;
        line-height: 15px;
        cursor: pointer;
         
        
          }
    
       LI.drawerssub a:visited {
        text-decoration: none;
        color: #717171;
        font-size: 9pt;
        
        
        
        
    }
    
       LI.drawerssub a:hover {
        text-decoration: none;
        color: #DD5629;
        font-size: 9pt;
        
        
       }   
  
 
 
    
      /*     LI.drawerssub a:active {
        text-decoration: none;
        color: #DD5629;
        font-size: 9pt;
        
    }
    
    */
 
 
/*    
LI.drawerssub a.ActiveItem:link,
LI.drawerssub a.ActiveItem:visited,
LI.drawerssub a.ActiveItem:hover,
LI.drawerssub a.ActiveItem:active
{
    color: #cc0000;
    text-decoration: underline;
    
    
}


*/

    
    H2.drawer-handle 
    {
        font-size: 11pt;
        color: #717171;
        padding-top: 0;
        padding-left: 0px;
        padding-right: 5px;
        padding-bottom: 3px;
        background-color: #FFFFFF;
        height: 30px;
        margin-bottom: 5px;
        list-style: none;
        border-bottom: 1px solid #EFEFF0; 
        cursor: pointer;
        width: 235px;
    }
    
    
            H2.drawer-handle.last 
    {
        font-size: 11pt;
        color: #717171;
        padding-top: 0;
        padding-left: 0px;
        padding-right: 5px;
        padding-bottom: 3px;
        background-color: #FFFFFF;
        height: 30px;
        margin-bottom: 5px;
        list-style: none;
        cursor: pointer;
        width: 235px;
    }
 
 /*
    
    H2.drawer-handle a:link 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

H2.drawer-handle a:hover 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

H2.drawer-handle a:visited
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}
*/
    
    H2.drawer-handle.open {
        background-color: #FFFFFF;
        list-style: none;
         font-size: 11pt;
         color: #717171;
         cursor: pointer;
         width: 235px;
    }

span.menutext
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        
}

span.menutext a 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

span.menutext a:hover 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

.menutext a:visited
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

span.menutext.active
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        
}

span.menutext.active a 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

span.menutext.active a:hover 
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

.menutext.active a:visited
{
        font-size: 11pt;
        color: #717171;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        
}

.firstmenutext  
{
        font-size: 11pt;
        color: #E54832;
        font-weight: normal;  
        cursor: pointer;
        
}


.firstmenutext a  
{
        font-size: 11pt;
        color: #E54832;
        font-weight: normal;  
        cursor: pointer;
        text-decoration: none;
       
        
}

.firstmenutext a:hover
{
        font-size: 11pt;
        color: #E54832;
        font-weight: normal;  
        cursor: pointer;
        text-decoration: none;
}

.firstmenutext a:visited
{
        font-size: 11pt;
        color: #E54832;
        font-weight: normal;  
        cursor: pointer;
        text-decoration: none;
}

Open in new window

Avatar of mickey159
mickey159
Flag of United States of America image

You mean to close it after clicking?
Also you want to open the menu only when clicking on the arrow?
Avatar of upchelpdesk
upchelpdesk

ASKER

I want the arrow image to be the only thing that opens and closes the menu.  Right Now anything in my H2 element opens and closes the menu on click.  
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Only answered part of my question.
Curious what part didn't it answer?