14 Replies Latest reply: Mar 15, 2013 9:38 PM by Roopavathy RSS

    How to insert the reponsive drop down menu?

    Roopavathy Community Member

      I want this multi level drop down menu to be included in my site.Here is the link.

      http://jasonweaver.name/lab/flexiblenavigation/

       

      How could i do it..i have followed the instruction here.but it doesn't work in mobile layout..Pls....help..........

        • 1. Re: How to insert the reponsive drop down menu?
          sudarshan.t MVP

          What code have you written in your webpage? Can you post that here?

          • 2. Re: How to insert the reponsive drop down menu?
            Roopavathy Community Member

            Sure....now it works in desktop layout..but not in mobile or tablet layout...

             

            <div id="Nav">  <!-- FG Div -->

            <div class="menu-button">Navigation</div>

                <nav>

                      <ul data-breakpoint="800" class="flexnav">

                        <li><a href="">Item 1</a>

                          <ul>

                            <li> <a href="#content">Sub 1 Item 1</a></li>

                            <li><a href="">Sub 1 Item 2</a></li>

                            <li><a href="">Sub 1 Item 3</a></li>

                            <li><a href="">Sub 1 Item 4</a></li>

                          </ul>

                        </li>

                        <li><a href="">Item 2</a>

                          <ul>

                            <li><a href="">Sub 1 Item 1</a></li>

                            <li><a href="">Sub 1 Item 2</a>

                              <ul>

                                <li><a href="">Sub 2 Item 1</a></li>

                                <li><a href="">Sub 2 Item 2</a></li>

                                <li><a href="">Sub 2 Item 3</a></li>

                              </ul>

                            </li>

                            <li><a href="">Sub 1 Item 3</a>

                              <ul>

                                <li><a href="">Sub 2 Item 1</a></li>

                                <li><a href="">Sub 2 Item 2</a>

                                  <ul>

                                    <li><a href="">Sub 3 Item 1</a></li>

                                    <li><a href="">Sub 3 Item 2</a></li>

                                    <li><a href="">Sub 3 Item 3</a></li>

                                  </ul>

                                </li>

                              </ul>

                            </li>

                          </ul>

                        </li>

                        <li><a href="">Item 3</a>

                          <ul>

                            <li><a href="">Sub 1 Item 1</a></li>

                            <li><a href="">Sub 1 Item 2</a></li>

                            <li><a href="">Sub 1 Item 3</a></li>

                          </ul>

                        </li>

                        <li><a href="">Item 4</a>

                          <ul>

                            <li><a href="">Sub 1 Item 1</a></li>

                            <li><a href="">Sub 1 Item 2</a></li>

                            <li><a href="">Sub 1 Item 3</a></li>

                          </ul>

                        </li>

                        <li><a href="">Item 5</a>

                          <ul>

                            <li><a href="">Sub 1 Item 1</a></li>

                            <li><a href="">Sub 1 Item 2</a></li>

                            <li><a href="">Sub 1 Item 3</a></li>

                          </ul>

                        </li>

                      </ul>

                    </nav>

                   

              </div> <!-- End div id="Nav"  -->

             

             

            CSS : flexnav.css

             

            /* Flexnav Base Styles */

            /* line 17, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            html, body, div, span, applet, object, iframe,

            h1, h2, h3, h4, h5, h6, p, blockquote, pre,

            a, abbr, acronym, address, big, cite, code,

            del, dfn, em, img, ins, kbd, q, s, samp,

            small, strike, strong, sub, sup, tt, var,

            b, u, i, center,

            dl, dt, dd, ol, ul, li,

            fieldset, form, label, legend,

            table, caption, tbody, tfoot, thead, tr, th, td,

            article, aside, canvas, details, embed,

            figure, figcaption, footer, header, hgroup,

            menu, nav, output, ruby, section, summary,

            time, mark, audio, video {

              margin: 0;

              padding: 0;

              border: 0;

              font: inherit;

              font-size: 100%;

              vertical-align: baseline;

            }

             

            /* line 22, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            html {

              line-height: 1;

            }

             

            /* line 24, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            ol, ul {

              list-style: none;

            }

             

            /* line 26, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            table {

              border-collapse: collapse;

              border-spacing: 0;

            }

             

            /* line 28, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            caption, th, td {

              text-align: left;

              font-weight: normal;

              vertical-align: middle;

            }

             

            /* line 30, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            q, blockquote {

              quotes: none;

            }

            /* line 103, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            q:before, q:after, blockquote:before, blockquote:after {

              content: "";

              content: none;

            }

             

            /* line 32, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            a img {

              border: none;

            }

             

            /* line 116, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

            article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {

              display: block;

            }

             

            /* Globals */

            /* line 26, ../sass/flexnav.scss */

            html, body, div, span, applet, object, iframe,

            h1, h2, h3, h4, h5, h6, p, blockquote, pre,

            a, abbr, acronym, address, big, cite, code,

            del, dfn, em, img, ins, kbd, q, s, samp,

            small, strike, strong, sub, sup, tt, var,

            b, u, i, center,

            dl, dt, dd, ol, ul, li,

            fieldset, form, label, legend,

            table, caption, tbody, tfoot, thead, tr, th, td,

            article, aside, canvas, details, embed,

            figure, figcaption, footer, header, hgroup,

            menu, nav, output, ruby, section, summary,

            time, mark, audio, video {

              font: inherit;

              vertical-align: baseline;

            }

             

            /* line 30, ../sass/flexnav.scss */

            .flexnav {

              *zoom: 1;

                overflow: hidden;

                width: 100%;

                max-height: 0;

                margin-top: 0;

                margin-right: auto;

                margin-bottom: 0;

                margin-left: auto;

            }

            /* line 38, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/utilities/general/_clearfix.scss */

            .flexnav:after {

              content: "";

              display: table;

              clear: both;

            }

            /* line 37, ../sass/flexnav.scss */

            .flexnav.show {

              -webkit-transition: 0.4s;

              -moz-transition: 0.4s;

              -o-transition: 0.4s;

              transition: 0.4s;

              max-height: 1000px;

            }

            /* line 41, ../sass/flexnav.scss */

            .flexnav.one-page {

              position: fixed;

              top: 50px;

              right: 5%;

              max-width: 200px;

            }

            /* line 48, ../sass/flexnav.scss */

            .flexnav li {

              font-size: 100%;

              position: relative;

            }

            /* line 52, ../sass/flexnav.scss */

            .flexnav li a {

              position: relative;

              display: block;

              padding: .40em;

              z-index: 2;

              overflow: hidden;

              color: #222222;

              text-decoration:none;

              text-align:center;

              background:#EAFBAE;

              border-bottom: 1px solid rgba(0, 0, 0, 0.15);

            }

            /* line 62, ../sass/flexnav.scss */

            .flexnav li ul {

              width: 100%;

              display: none;

            }

            /* line 66, ../sass/flexnav.scss */

            .flexnav li ul li {

              float: none;

              width: 100%;

            }

            /* line 70, ../sass/flexnav.scss */

            .flexnav li ul li a {

              display: block;

              background:#EAFBAE;

            }

            /* line 74, ../sass/flexnav.scss */

            .flexnav ul li ul li a {

              background: #bfbfbc;

            }

            /* line 77, ../sass/flexnav.scss */

            .flexnav ul li ul li ul li a {

              background: #cbcbc9;

            }

            /* line 80, ../sass/flexnav.scss */

            .flexnav .touch-button {

              position: absolute;

              z-index: 999;

              top: 0;

              right: 0;

              width: 50px;

             

              display: inline-block;

              background: #acaca1;

              background: rgba(0, 0, 0, 0.075);

              text-align: center;

            }

            /* line 91, ../sass/flexnav.scss */

            .flexnav .touch-button:hover {

              cursor: pointer;

            }

            /* line 94, ../sass/flexnav.scss */

            .flexnav .touch-button .navicon {

              position: relative;

              top: 1.4em;

              font-size: 12px;

              color: #666;

            }

             

            /* line 102, ../sass/flexnav.scss */

            .menu-button {

                position: relative;

                display: block;

                text-align:center;

                padding: .40em;

                background:#E2FA8F;

                color: #222222;

                cursor: pointer;

                border-bottom: 1px solid rgba(0, 0, 0, 0.2);

                height:20%;

               

            }

            /* line 111, ../sass/flexnav.scss */

            .menu-button.one-page {

              position:fixed;

              top: 0;

              right: 5%;

              padding-right: 45px;

             

            }

            /* line 118, ../sass/flexnav.scss */

            .menu-button .touch-button {

              background: transparent;

              position: absolute;

              z-index: 999;

              top: 0;

              right: 0;

              width: 50px;

             

              display: inline-block;

              text-align: center;

            }

            /* line 129, ../sass/flexnav.scss */

            .menu-button .touch-button .navicon {

              font-size: 16px;

              position: relative;

              top: 1em;

              color: #666;

            }

             

            @media all and (min-width: 800px) {

              /* line 139, ../sass/flexnav.scss */

              body.one-page {

                padding-top: 70px;

              }

             

              /* line 142, ../sass/flexnav.scss */

              .flexnav {

                overflow: visible;

                max-height: 1000px;

              }

              /* line 146, ../sass/flexnav.scss */

              .flexnav.one-page {

                top: 0;

                right: auto;

                max-width: 1080px;

              }

              /* line 151, ../sass/flexnav.scss */

              .flexnav li {

                position: relative;

                list-style: none;

                float: left;

                display: block;

                background-color: #a6a6a2;

                width: 20%;

              }

              /* line 159, ../sass/flexnav.scss */

              .flexnav li:hover > ul {

                visibility: visible;

                opacity: 1;

                height: auto;

                display: block;

                top: 3.1em;

                position: absolute;

              }

              /* line 168, ../sass/flexnav.scss */

              .flexnav.lg-screen li:hover > ul, .flexnav.sm-screen li:hover > ul {

                display: none;

              }

              /* line 171, ../sass/flexnav.scss */

              .flexnav li a {

                border-left: 1px solid #acaca1;

                border-bottom: none;

              }

              /* line 175, ../sass/flexnav.scss */

              .flexnav li > ul {

                position: absolute;

                top: auto;

                left: 0;

                opacity: 0;

                visibility: hidden;

                height: 1px;

                z-index: 1;

              }

              /* line 184, ../sass/flexnav.scss */

              .flexnav li ul li ul {

                top: 0;

              }

              /* line 187, ../sass/flexnav.scss */

              .flexnav li ul li a {

                border-bottom: none;

              }

              /* line 190, ../sass/flexnav.scss */

              .flexnav li ul.open {

                display: block;

                opacity: 1;

                visibility: visible;

                height: auto;

              }

              /* line 196, ../sass/flexnav.scss */

              .flexnav li ul.open ul.open {

                margin-left: 100%;

                top: 0;

              }

              /* line 201, ../sass/flexnav.scss */

              .flexnav ul li:hover ul {

                margin-left: 100%;

                top: 0;

              }

             

              /* line 206, ../sass/flexnav.scss */

              .menu-button {

                display: none;

              }

            }

            /* line 212, ../sass/flexnav.scss */

            .oldie body.one-page {

              padding-top: 70px;

            }

            /* line 215, ../sass/flexnav.scss */

            .oldie .flexnav {

              overflow: visible;

              max-height: 1000px;

            }

            /* line 219, ../sass/flexnav.scss */

            .oldie .flexnav.one-page {

              top: 0;

              right: auto;

              max-width: 1080px;

            }

            /* line 224, ../sass/flexnav.scss */

            .oldie .flexnav li {

              position: relative;

              list-style: none;

              float: left;

              display: block;

              background-color: #a6a6a2;

              width: 20%;

            }

            /* line 232, ../sass/flexnav.scss */

            .oldie .flexnav li:hover > ul {

              visibility: visible;

              opacity: 1;

              height: auto;

              display: block;

              top: 3.1em;

              position: absolute;

            }

            /* line 241, ../sass/flexnav.scss */

            .oldie .flexnav.lg-screen li:hover > ul, .oldie .flexnav.sm-screen li:hover > ul {

              display: none;

            }

            /* line 244, ../sass/flexnav.scss */

            .oldie .flexnav li a {

              border-left: 1px solid #acaca1;

              border-bottom: none;

            }

            /* line 248, ../sass/flexnav.scss */

            .oldie .flexnav li > ul {

              position: absolute;

              top: auto;

              left: 0;

              opacity: 0;

              visibility: hidden;

              height: 1px;

              z-index: 1;

            }

            /* line 257, ../sass/flexnav.scss */

            .oldie .flexnav li ul li ul {

              top: 0;

            }

            /* line 260, ../sass/flexnav.scss */

            .oldie .flexnav li ul li a {

              border-bottom: none;

            }

            /* line 263, ../sass/flexnav.scss */

            .oldie .flexnav li ul.open {

              display: block;

              opacity: 1;

              visibility: visible;

              height: auto;

            }

            /* line 269, ../sass/flexnav.scss */

            .oldie .flexnav li ul.open ul.open {

              margin-left: 100%;

              top: 0;

            }

            /* line 274, ../sass/flexnav.scss */

            .oldie .flexnav ul li:hover ul {

              margin-left: 100%;

              top: 0;

            }

            /* line 279, ../sass/flexnav.scss */

            .oldie .menu-button {

              display: none;

            }

            • 3. Re: How to insert the reponsive drop down menu?
              sudarshan.t MVP

              Have you downloaded and included the required .js files? Does your .html page have these 2 lines?

               

              <script src="js/jquery.flexnav.min.js" type="text/javascript"></script>

                  <script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>

              • 4. Re: How to insert the reponsive drop down menu?
                Roopavathy Community Member

                Yes.i included those lines before the closing body tag.

                • 5. Re: How to insert the reponsive drop down menu?
                  sudarshan.t MVP

                  Post your FULL code here for us to review - or we'll be taking wild guesses to 'assume' if you've added what needs added or not.

                  • 6. Re: How to insert the reponsive drop down menu?
                    Roopavathy Community Member

                    <!doctype html>

                    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

                    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

                    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

                    <!--[if gt IE 8]><!-->

                    <html class="">

                    <!--<![endif]-->

                    <head>

                    <meta charset="utf-8">

                    <meta name="viewport" content="width=device-width, initial-scale=1">

                    <title>Untitled Document</title>

                    <link href="boilerplate.css" rel="stylesheet" type="text/css">

                    <link href="CSS/Layout.css" rel="stylesheet" type="text/css">

                     

                    <link rel="stylesheet" href="flexslider.css" type="text/css">

                     

                    <link href="css/flexnav.css" rel="stylesheet" type="text/css" />

                     

                    <style type="text/css">

                    body {

                        background-color: #E9E9E9;

                    }

                    </style>

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

                    <script src="jquery.flexslider.js"></script>

                     

                    <!-- Place in the <head>, after the three links -->

                    <script type="text/javascript" charset="utf-8">

                      $(window).load(function() {

                        $('.flexslider').flexslider();

                      });

                    </script>

                     

                     

                    <!--

                    To learn more about the conditional comments around the html tags at the top of the file:

                    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

                     

                    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

                    * insert the link to your js here

                    * remove the link below to the html5shiv

                    * add the "no-js" class to the html tags at the top

                    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build

                    -->

                    <!--[if lt IE 9]>

                    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                    <![endif]-->

                    <script src="respond.min.js"></script>

                    </head>

                    <body>

                    <div class="gridContainer clearfix">

                      <div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>

                      <div id="Nav">

                    <div class="menu-button">Navigation</div>

                        <nav>

                              <ul data-breakpoint="800" class="flexnav">

                                <li><a href="">Item 1</a>

                                  <ul>

                                    <li> <a href="#content">Sub 1 Item 1</a></li>

                                    <li><a href="">Sub 1 Item 2</a></li>

                                    <li><a href="">Sub 1 Item 3</a></li>

                                    <li><a href="">Sub 1 Item 4</a></li>

                                  </ul>

                                </li>

                                <li><a href="">Item 2</a>

                                  <ul>

                                    <li><a href="">Sub 1 Item 1</a></li>

                                    <li><a href="">Sub 1 Item 2</a>

                                      <ul>

                                        <li><a href="">Sub 2 Item 1</a></li>

                                        <li><a href="">Sub 2 Item 2</a></li>

                                        <li><a href="">Sub 2 Item 3</a></li>

                                      </ul>

                                    </li>

                                    <li><a href="">Sub 1 Item 3</a>

                                      <ul>

                                        <li><a href="">Sub 2 Item 1</a></li>

                                        <li><a href="">Sub 2 Item 2</a>

                                          <ul>

                                            <li><a href="">Sub 3 Item 1</a></li>

                                            <li><a href="">Sub 3 Item 2</a></li>

                                            <li><a href="">Sub 3 Item 3</a></li>

                                          </ul>

                                        </li>

                                      </ul>

                                    </li>

                                  </ul>

                                </li>

                                <li><a href="">Item 3</a>

                                  <ul>

                                    <li><a href="">Sub 1 Item 1</a></li>

                                    <li><a href="">Sub 1 Item 2</a></li>

                                    <li><a href="">Sub 1 Item 3</a></li>

                                  </ul>

                                </li>

                                <li><a href="">Item 4</a>

                                  <ul>

                                    <li><a href="">Sub 1 Item 1</a></li>

                                    <li><a href="">Sub 1 Item 2</a></li>

                                    <li><a href="">Sub 1 Item 3</a></li>

                                  </ul>

                                </li>

                                <li><a href="">Item 5</a>

                                  <ul>

                                    <li><a href="">Sub 1 Item 1</a></li>

                                    <li><a href="">Sub 1 Item 2</a></li>

                                    <li><a href="">Sub 1 Item 3</a></li>

                                  </ul>

                                </li>

                              </ul>

                            </nav>

                           

                      </div> <!-- End div id="Nav"  -->

                     

                     

                     

                      <div id="LayoutDiv2">

                      <div class="flex-container">

                      <div class="flexslider">

                        <ul class="slides">

                          <li>

                            <img src="SJV-Images/Stud1.jpg" alt="SJV1"/>

                          </li>

                          <li>

                            <img src="SJV-Images/Stud2.jpg" />

                          </li>

                          <li>

                            <img src="SJV-Images/Stud3.jpg" />

                          </li>

                        </ul>

                      </div>

                      </div>

                    </div>  

                      <div class="borderbox" id="Special_Features"><h3 class="content" align="center">SPECIAL FEATURES</h3>

                      <ul class="formatlist" >

                      <li >

                      It is one of the oldest school.</li>

                      <li>It was first started as an orphanage for the children , and later moved to its current location.</li>

                       <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>

                      <li>The campus now has separate buildings within the campus for year 1 to  year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>

                      <li>The school has montessori facilities in a separate building.</li>

                      <li>The School also has boarding facilities for students from distant places.</li>

                      </ul></div>

                      <div id="History">

                            <img src="SJV-Images/FrontImage.jpg" alt="Hisimage" class="floatright"/>

                        <h3 class="content" style="padding:0 2.5%;">HISTORY OF OUR SCHOOL</h3>

                        <P class="formatpara">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis..</P>

                        <p class="formatpara">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis.</p><br><br><br> <img src="SJV-Images/Readmore_butt.png" class="hisbutt"/>

                       <!-- <div id="His_Butt"><img src="SJV-Images/Hisbutt.png"/></div> -->

                     

                      </div>

                      <div class="borderbox" id="Con"><center>

                        <p class="content"><strong>CONTACT US</strong></p>

                        <p class="formatpara"><strong>The Head Mistress</strong><br>

                     

                          <strong>Pellentesque aliquet aliquet <br> aliquet aliquetl,</strong>

                          <strong>Trichy-20.</strong></p>

                      </center>

                      </div>

                     

                    <div id="Photo_Gall"><center spry:selectgroup="content">

                        <strong>PHOTO GALLERY</strong>

                    </center>

                      <p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>

                    </div>

                      <div id="News_Events"><center spry:selectgroup="content">

                        <strong>OUR FACULTIES</strong>

                      </center><P><IMG src="SJV-Images/Faculties_profile.png" width="174" height="70" class="floatright"/></P>

                    </div>

                      <div id="Cal"><center spry:selectgroup="content"><strong>ALUMNI</strong></center><P><IMG src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></P></div>

                     

                      <div id="footer">This is the content for Layout Div Tag "footer"</div>

                    </div>

                     

                    <script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

                     

                    <script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>

                    </body>

                    </html>

                    • 7. Re: How to insert the reponsive drop down menu?
                      sudarshan.t MVP

                      This plug-in is built with jQuery 1.9 library. Your page uses 1.6.2.

                       

                      Change:

                       

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

                      to:

                       

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

                       

                      The menu should work on mobile layout.

                      • 8. Re: How to insert the reponsive drop down menu?
                        mhollis55 Community Member

                        Ooh, where's Al Sparber at a time like this!

                         

                        Al made a comment recently about jQuery that might be helpful here. He said two things that are totally relevant:

                         

                        The open source movement is a double-edged sword. It can produce great tools. The jQuery library is a great tool. But it is only a great tool for JavaScript authors. The downside is that the movement, by nature, has zero accountability beyond the core tool.

                         

                        And also:

                         

                        JQuery Best Practice: The Definitive Guide:

                         

                        1. Use jQuery only if you write your own plugins and are prepared to keep everything updated.
                        2. See #1.

                         

                        Make sure you are using the particular version of jQuery with the JavaScript widget that supports it. I have actually seen websites with several different versions of jQuery (which can slow down everything to load all of those versions). I have to wonder if the various versions interfere with each other.

                         

                        Newer versions of jQuery will "break" JavaScript widgets. So if you are using jQuery, try to load one version and only use widgets that are supported by that version.

                        • 9. Re: How to insert the reponsive drop down menu?
                          sudarshan.t MVP

                          mholis, The many times I've experienced jQuery plug-ins, most of them have been 'downward' friendly.

                           

                          I use jQuery.noConflict. See here: http://api.jquery.com/jQuery.noConflict/ and it works very well to overcome errors due to conflicts, which is what primarily causes errors on page.

                          • 10. Re: How to insert the reponsive drop down menu?
                            Roopavathy Community Member

                            Thank you very much Sudharshan.It works.Thanks a lot.Can i change that drop down arrow size and its colour?

                            • 11. Re: How to insert the reponsive drop down menu?
                              sudarshan.t MVP

                              Yes, you can.

                               

                              Flexnav.css, Line 209 find class .navicon.

                               

                              Change color to anything you'd like. Add:

                               

                              font-size: 24px;

                              to this selector to control the font size. Theyv'e used a special character in there for the triangle. So, a simple font-size change should take care of it for you.

                              • 12. Re: How to insert the reponsive drop down menu?
                                Roopavathy Community Member

                                Thank u very much for ur kind replies.It works well.Pls..how could i change the colour of the immediate drop down from the menu bar.and also i want to reduce the height so..that there is no space between the drop down and the menu.

                                and also how can i change the sub menu's arrowSJV_menu.JPG

                                • 13. Re: How to insert the reponsive drop down menu?
                                  sudarshan.t MVP
                                  • Submenu arrow is within the HTML markup. <i class="navicon">...</i> Replace the triangle character with anything else you want. Or, you could apply a background-image to the 'ul li ul span' selector.

                                   

                                  • Height, Line 137 of flexnav.css .flexnav li ul li:

                                   

                                  Add

                                   

                                  max-height: 32px;

                                  Change height as desired. 32px fits all text items within it exactly.

                                   

                                  • Add background-color to CSS for li ul selector to override background color for the submenus
                                  • 14. Re: How to insert the reponsive drop down menu?
                                    Roopavathy Community Member

                                    Thank you very much.I could change the height of the sbumenu.I don't know how to  change the triangle character.And also i couldn't change the colour of the sub menu.Pls help.

                                     

                                    /* Flexnav Base Styles */

                                    /* line 17, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    html, body, div, span, applet, object, iframe,

                                    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

                                    a, abbr, acronym, address, big, cite, code,

                                    del, dfn, em, img, ins, kbd, q, s, samp,

                                    small, strike, strong, sub, sup, tt, var,

                                    b, u, i, center,

                                    dl, dt, dd, ol, ul, li,

                                    fieldset, form, label, legend,

                                    table, caption, tbody, tfoot, thead, tr, th, td,

                                    article, aside, canvas, details, embed,

                                    figure, figcaption, footer, header, hgroup,

                                    menu, nav, output, ruby, section, summary,

                                    time, mark, audio, video {

                                      margin: 0;

                                      padding: 0;

                                      border: 0;

                                      font: inherit;

                                      font-size: 100%;

                                      vertical-align: baseline;

                                    }

                                     

                                    /* line 22, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    html {

                                      line-height: 1;

                                    }

                                     

                                    /* line 24, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    ol, ul {

                                      list-style: none;

                                    }

                                     

                                    /* line 26, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    table {

                                      border-collapse: collapse;

                                      border-spacing: 0;

                                    }

                                     

                                    /* line 28, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    caption, th, td {

                                      text-align: left;

                                      font-weight: normal;

                                      vertical-align: middle;

                                    }

                                     

                                    /* line 30, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    q, blockquote {

                                      quotes: none;

                                    }

                                    /* line 103, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    q:before, q:after, blockquote:before, blockquote:after {

                                      content: "";

                                      content: none;

                                    }

                                     

                                    /* line 32, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    a img {

                                      border: none;

                                    }

                                     

                                    /* line 116, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/reset/_utilities.scss */

                                    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {

                                      display: block;

                                    }

                                     

                                    /* Globals */

                                    /* line 26, ../sass/flexnav.scss */

                                    html, body, div, span, applet, object, iframe,

                                    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

                                    a, abbr, acronym, address, big, cite, code,

                                    del, dfn, em, img, ins, kbd, q, s, samp,

                                    small, strike, strong, sub, sup, tt, var,

                                    b, u, i, center,

                                    dl, dt, dd, ol, ul, li,

                                    fieldset, form, label, legend,

                                    table, caption, tbody, tfoot, thead, tr, th, td,

                                    article, aside, canvas, details, embed,

                                    figure, figcaption, footer, header, hgroup,

                                    menu, nav, output, ruby, section, summary,

                                    time, mark, audio, video {

                                      font: inherit;

                                      vertical-align: baseline;

                                    }

                                     

                                    /* line 30, ../sass/flexnav.scss */

                                    .flexnav {

                                      *zoom: 1;

                                        overflow: hidden;

                                        width: 100%;

                                        max-height: 0;

                                        margin-top: 0;

                                        margin-right: auto;

                                        margin-bottom: 0;

                                        margin-left: auto;

                                    }

                                    /* line 38, ../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/com pass/stylesheets/compass/utilities/general/_clearfix.scss */

                                    .flexnav:after {

                                      content: "";

                                      display: table;

                                      clear: both;

                                    }

                                    /* line 37, ../sass/flexnav.scss */

                                    .flexnav.show {

                                      -webkit-transition: 0.4s;

                                      -moz-transition: 0.4s;

                                      -o-transition: 0.4s;

                                      transition: 0.4s;

                                      max-height: 1000px;

                                    }

                                    /* line 41, ../sass/flexnav.scss */

                                    .flexnav.one-page {

                                      position: fixed;

                                      top: 50px;

                                      right: 5%;

                                      max-width: 200px;

                                    }

                                    /* line 48, ../sass/flexnav.scss */

                                    .flexnav li {

                                        font-size: 100%;

                                        position: relative;

                                    }

                                    /* line 52, ../sass/flexnav.scss */

                                     

                                    .flexnav li a { /*main menu bar */

                                      position: relative;

                                      display: block;

                                      padding: .43em;

                                      z-index: 2;

                                      overflow: hidden;

                                      color: #222222;

                                      font-family:Arial, Helvetica, sans-serif;

                                      font-size:13px;

                                      text-decoration:none;

                                      text-align:center;

                                      background:#E2FA8F;

                                      border-bottom: 1px solid rgba(0, 0, 0, 0.15);

                                    }

                                    /* line 62, ../sass/flexnav.scss */

                                    .flexnav li ul { /* main menu drop down */

                                     

                                      width: 100%;

                                      display: none;

                                    }

                                     

                                    /* line 66, ../sass/flexnav.scss */

                                    .flexnav li ul li {

                                      float: none;

                                      width: 100%;

                                      max-height: 32px;

                                     

                                     

                                    }

                                    /* line 70, ../sass/flexnav.scss */

                                    .flexnav li ul li a {

                                      display: block;

                                      background:#F0FCC7;

                                    }

                                     

                                     

                                    /* line 74, ../sass/flexnav.scss */

                                    .flexnav ul li ul li a {

                                      background:#F0FCC7;

                                    }

                                    /* line 77, ../sass/flexnav.scss */

                                    .flexnav ul li ul li ul li a { /* third drop menu */

                                      background:#F0FCC7;

                                    }

                                    /* line 80, ../sass/flexnav.scss */

                                    .flexnav .touch-button {

                                        position: absolute;

                                        z-index: 999;

                                        top: 0;

                                        right: 0;

                                        width: 50px;

                                        display: inline-block;

                                        text-align: center;

                                        height: 31px;

                                    }

                                    /* line 91, ../sass/flexnav.scss */

                                    .flexnav .touch-button:hover {

                                      cursor: pointer;

                                    }

                                    /* line 94, ../sass/flexnav.scss */

                                    .flexnav .touch-button .navicon {

                                      position: relative;

                                      top: .40em;

                                      font-size: 12px;

                                      color:#000;

                                    }

                                     

                                    /* line 102, ../sass/flexnav.scss */

                                    .menu-button {

                                        position: relative;

                                        display: block;

                                        text-align:center;

                                        padding: .40em;

                                        background:#E2FA8F;

                                        color: #222222;

                                        cursor: pointer;

                                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                                        height:10%;

                                       

                                    }

                                    /* line 111, ../sass/flexnav.scss */

                                    .menu-button.one-page {

                                      position:fixed;

                                      top: 0;

                                      right: 5%;

                                      padding-right: 45px;

                                     

                                    }

                                    /* line 118, ../sass/flexnav.scss */

                                    .menu-button .touch-button {

                                      background: transparent;

                                      position: absolute;

                                      z-index: 999;

                                      top: 0;

                                      right: 0;

                                      width: 50px;

                                     

                                      display: inline-block;

                                      text-align: center;

                                    }

                                    /* line 129, ../sass/flexnav.scss */

                                    .menu-button .touch-button .navicon {

                                      font-size: 16px;

                                      position: relative;

                                      top:.70em;

                                      color: #666;

                                    }

                                     

                                    @media all and (min-width: 800px) {

                                      /* line 139, ../sass/flexnav.scss */

                                      body.one-page {

                                        padding-top: 70px;

                                      }

                                     

                                      /* line 142, ../sass/flexnav.scss */

                                      .flexnav {

                                        overflow: visible;

                                        max-height: 1000px;

                                      }

                                      /* line 146, ../sass/flexnav.scss */

                                      .flexnav.one-page {

                                        top: 0;

                                        right: auto;

                                        max-width: 1080px;

                                      }

                                      /* line 151, ../sass/flexnav.scss */

                                      .flexnav li {

                                        position: relative;

                                        list-style: none;

                                        float: left;

                                        display: block;

                                        background-color: #a6a6a2;

                                        width: 20%;

                                      }

                                      /* line 159, ../sass/flexnav.scss */

                                      .flexnav li:hover > ul {

                                        visibility: visible;

                                        opacity: 1;

                                        height: auto;

                                        display: block;

                                        top: 2em;

                                        position: absolute;

                                      }

                                      /* line 168, ../sass/flexnav.scss */

                                      .flexnav.lg-screen li:hover > ul, .flexnav.sm-screen li:hover > ul {

                                        display: none;

                                      }

                                      /* line 171, ../sass/flexnav.scss */

                                      .flexnav li a {

                                        border-left: 1px solid #acaca1;

                                        border-bottom: none;

                                      }

                                      /* line 175, ../sass/flexnav.scss */

                                      .flexnav li > ul {

                                        position: absolute;

                                        top: auto;

                                        left: 0;

                                        opacity: 0;

                                        visibility: hidden;

                                        height: 1px;

                                        z-index: 1;

                                      }

                                      /* line 184, ../sass/flexnav.scss */

                                      .flexnav li ul li ul {

                                        top: 0;

                                      }

                                      /* line 187, ../sass/flexnav.scss */

                                      .flexnav li ul li a {

                                        border-bottom: none;

                                        background-color: #EAFBAE;

                                      }

                                      /* line 190, ../sass/flexnav.scss */

                                      .flexnav li ul.open {

                                        display: block;

                                        opacity: 1;

                                        visibility: visible;

                                        height: auto;

                                      }

                                      /* line 196, ../sass/flexnav.scss */

                                      .flexnav li ul.open ul.open {

                                        margin-left: 100%;

                                        top: 0;

                                      }

                                      /* line 201, ../sass/flexnav.scss */

                                      .flexnav ul li:hover ul {

                                        margin-left: 100%;

                                        top: 0;

                                      }

                                     

                                      /* line 206, ../sass/flexnav.scss */

                                      .menu-button {

                                        display: none;

                                      }

                                    }

                                    /* line 212, ../sass/flexnav.scss */

                                    .oldie body.one-page {

                                      padding-top: 70px;

                                    }

                                    /* line 215, ../sass/flexnav.scss */

                                    .oldie .flexnav {

                                      overflow: visible;

                                      max-height: 1000px;

                                    }

                                    /* line 219, ../sass/flexnav.scss */

                                    .oldie .flexnav.one-page {

                                      top: 0;

                                      right: auto;

                                      max-width: 1080px;

                                    }

                                    /* line 224, ../sass/flexnav.scss */

                                    .oldie .flexnav li {

                                      position: relative;

                                      list-style: none;

                                      float: left;

                                      display: block;

                                      background-color: #a6a6a2;

                                      width: 20%;

                                    }

                                    /* line 232, ../sass/flexnav.scss */

                                    .oldie .flexnav li:hover > ul {

                                      visibility: visible;

                                      opacity: 1;

                                      height: auto;

                                      display: block;

                                      top: 3.1em;

                                      position: absolute;

                                    }

                                    /* line 241, ../sass/flexnav.scss */

                                    .oldie .flexnav.lg-screen li:hover > ul, .oldie .flexnav.sm-screen li:hover > ul {

                                      display: none;

                                    }

                                    /* line 244, ../sass/flexnav.scss */

                                    .oldie .flexnav li a {

                                      border-left: 1px solid #acaca1;

                                      border-bottom: none;

                                    }

                                    /* line 248, ../sass/flexnav.scss */

                                    .oldie .flexnav li > ul {

                                      position: absolute;

                                      top: auto;

                                      left: 0;

                                      opacity: 0;

                                      visibility: hidden;

                                      height: 1px;

                                      z-index: 1;

                                    }

                                    /* line 257, ../sass/flexnav.scss */

                                    .oldie .flexnav li ul li ul {

                                      top: 0;

                                    }

                                    /* line 260, ../sass/flexnav.scss */

                                    .oldie .flexnav li ul li a {

                                      border-bottom: none;

                                    }

                                    /* line 263, ../sass/flexnav.scss */

                                    .oldie .flexnav li ul.open {

                                      display: block;

                                      opacity: 1;

                                      visibility: visible;

                                      height: auto;

                                    }

                                    /* line 269, ../sass/flexnav.scss */

                                    .oldie .flexnav li ul.open ul.open {

                                      margin-left: 100%;

                                      top: 0;

                                    }

                                    /* line 274, ../sass/flexnav.scss */

                                    .oldie .flexnav ul li:hover ul {

                                      margin-left: 100%;

                                      top: 0;

                                    }

                                    /* line 279, ../sass/flexnav.scss */

                                    .oldie .menu-button {

                                      display: none;

                                    }