Saturday, 15 March 2014

jquery - Toggle driving me crazy in responsive design -



jquery - Toggle driving me crazy in responsive design -

i'm total beginner jquery , having lot of problem responsive website i'm designing. 2 horizontal menus on desktop site, when screen size hits 657px , less need horizontal menus become drop downwards menus.

i thought had working until realised when screen size less 657px , opened , closed(toggled?) drop downwards open , close in larger sizes well, makes perfect sense have no thought how stop doing that, need drop-down appears @ sizes 657px , less toggles only, not horizontal menus well.

i tried adding .show horizontal menus @ >=657 create sure showed, caused contents of drop downwards menus show before pressed . thought must impossible until saw many websites have done (bostonglobe.com instance).

i think question similar didn't understand solution: jquery toggle on responsive site

my html (it's standard arabic website)

<button id="categories-dd" class="unactive-main"></button> <nav id="main-navigation"> <ul id="menu"> <li class="leaf" id="dd-mainnav"> <a href="main.html">الرئيسية</a> </li> <li class="leaf1" id="dd-mainnav"> <a href="politics-html.html">سياسة</a> </li> <li class="leaf2" id="dd-mainnav"> <a href="sports-html.html">رياضة</a> </li> <li class="leaf3" id="dd-mainnav"> <a href="business-html.html">أعمال</a> </li> <li class="leaf4" id="dd-mainnav"> <a href="culture-html.html">ثقافة</a> </li> <li class="leaf5" id="dd-mainnav"> <a href="opinion-html.html">رأي</a> </li> <li class="leaf6" id="dd-mainnav"> <a href="tech-html.html">تكنلوجيا</a> </li> <li class="leaf7" id="dd-mainnav"> <a href="lifestyle-html.html">نمط الحياة</a> </li> <li class="leaf8" id="dd-mainnav"> <a href="multimedia-html.html">فيديو</a> </li> </ul> </nav> <!--end: main navigation--> <!--secondary navigation--> <button id="countries-dd" class="unactive-sec">البلد</button> <nav id="secondary-navigation"> <ul id="menu2"> <li class="subleaf"> <a href="arab-news-html.html">الإمارات</a> </li> <li class="subleaf"> <a href="arab-news-html.html">عمان</a> </li> <li class="subleaf"> <a href="arab-news-html.html">اليمن</a> </li> <li class="subleaf"> <a href="arab-news-html.html">السعودية</a> </li> <li class="subleaf"> <a href="arab-news-html.html">البحرين</a> </li> <li class="subleaf"> <a href="arab-news-html.html">قطر</a> </li> <li class="subleaf"> <a href="khalij-html.html">الكويت</a> </li> <li class="subleaf"> <a href="iraq-html.html">العراق</a> </li> <li class="subleaf"> <a href="syria-html.html">سوريا</a> </li> <li class="subleaf"> <a href="lebanon-html.html">لبنان</a> </li> <li class="subleaf"> <a href="jordan-html.html">الأردن</a> </li> <li class="subleaf"> <a href="palestine-html.html">فلسطين</a> </li> <li class="subleaf"> <a href="egypt-html.html">مصر</a> </li> <li class="subleaf"> <a href="sudan-html.html">السودان</a> </li> <li class="subleaf"> <a href="libya-html.html">ليبيا</a> </li> <li class="subleaf"> <a href="tunisia-html.html">تونس</a> </li> <li class="subleaf"> <a href="algeria-html.html">الجزائر</a> </li> <li class="subleaf"> <a href="morocco-html.html">المغرب</a> </li> <li class="subleaf"> <a href="mauritania-html.html">موريتانيا</a> </li> </ul> </nav> <!--end: secondary navigation-->

my jquery(please don't laugh):

$(document).ready(function(){ $('#countries-dd,#categories-dd').on('click', function(){ $(this).next().toggle(); }); $(document).ready(function(){ $('#categories-dd').on('click',function(){ $('#categories-dd').toggleclass('active-main'); }); }); $(document).ready(function(){ $("#countries-dd").on('click',function(){ $("#countries-dd").toggleclass("active-sec"); }); }); }); $(window).resize(function() { if($(window).width() > 657) { $('#main-navigation, #secondary-navigation').show(); } });

any help appreciated....thank you!

you have several elements same id dd-mainnav. that's not allowed. utilize multiple classes instead:

<li class="leaf7 dd-mainnav">

once (and rewrite js , css accordingly), add together test window's width within click handlers:

$('#categories-dd').on('click',function(){ if ($(window).width > 657){ $(this).toggleclass('active-main'); } });

but might easier leave js as-is , add together new styles mobile stylesheet:

#categories-dd, #categories-dd.active-main { display: block; /* or whatever */ }

jquery toggle responsive-design

No comments:

Post a Comment