Menu icon Foundation

My Posts

  • 6
    Replies
  • add links to content dropdown

    By Yasir

    dropdownfoundation5

    want to have links in content drop down like in image attached but when i add link and open dropdown and by clickign anywhere within in content dropdown get closed so if i have form in dropdown and link button i can't fill form fields as soon as i cli... (continued)

    Last Reply by Yasir over 4 years ago




  • 4
    Replies
  • Orbit Slider is not working

    By Yasir

    Orbitfoundation-5.2.3slider

    Hi, i'm new to Foundation just started yesterday and now i'm trying to add orbit silder but its not working, please see below html and i have foundation call THIS is not all the thing i need ? i'm using foundation 5.2.3 Before this i used http://ken... (continued)

    Last Reply by Yasir over 5 years ago


My Comments

Yasir commented on Yasir's post over 4 years

Thanks a lot Rafi

Yasir commented on Yasir's post over 4 years

where i can get the custom version of 5.1.1 ?

Yasir commented on Yasir's post over 4 years

here is codepen http://codepen.io/yasirhaleem/full/jEXWge/

i think its bug with version 5.5.1 it works fine if i use 5.1.1

Yasir commented on Yasir's post over 4 years

Thanks a lot Rafi,

Yes link is meant to take user to another page but it should't close by click inside content elsewhere.

it get close even if i click anywhere inside content :( i have form in dropdown content and when i try to input it get close is there any solution for this other than auto close false ? it should auto close if i click outside anywhere.

Yasir commented on Yasir's post over 5 years

CODE I'M USING

IT WORKS FOR DESKTOP BUT NOT MOBILE

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
     <!-- OFF CANVAS MENU BAR -->
     <div class="sticky contain-to-grid"> 
        <nav class="tab-bar hide-for-large-up "data-topbar data-options="sticky_on: all">

            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
                <h1 class="title">Menu</h1>
            </section>

        </nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->
 </div>
        <!-- OFF CANVAS MENU -->
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Navigation</label></li>
                <li><a href="index.html">Home</a></li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="blog.html">Blog</a>
                    <ul class="off-canvas-list">
                        <li><a href="blog.html">Archive</a></li>
                        <li><a href="post.html">Single</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="page.html">Page</a>
                    <ul class="off-canvas-list">
                        <li><a href="page.html">Full-width</a></li>
                        <li><a href="sidebar-left.html">Left Sidebar</a></li>
                        <li><a href="sidebar-right.html">Right Sidebar</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li><a href="portfolio.html">Portfolio</a></li>
            </ul>
        </aside>
  <!-- HEADER SECTION -->
<header>
    <div class="row">
        <div class="small-12 medium-12 large-12 columns">
            <div class="logo">
                <h1>Foundation 5 Topbar / Offcanvas menu</h1>
            </div> <!-- END DIV.LOGO -->
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</header> <!-- END HEADER -->
 <!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
    <div class="row">
        <div class="large-12 columns">

            <!-- TOP BAR INITIALIZATION -->
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1></h1>
                    </li>
                </ul> <!-- END UL.TITLE-AREA -->

                <!-- TOP BAR MENU ELEMENTS -->
                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="has-dropdown">
                            <a href="blog.html">Blog</a>
                            <ul class="dropdown">
                                <li><a href="blog.html">Archive</a></li>
                                <li><a href="post.html">Single</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="page.html">Page</a>
                            <ul class="dropdown">
                                <li><a href="page.html">Full-wdith</a></li>
                                <li><a href="sidebar-left.html">Left Sidebar</a></li>
                                <li><a href="sidebar-right.html">Right Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li class="has-dropdown">
                            <a href="#">Dropdown</a>
                            <ul class="dropdown">
                                <li><a href="#">First link in dropdown</a></li>
                                <li><a href="#">Second link in dropdown</a></li>
                                <li><a href="#">Third link in dropdown</a></li>
                            </ul>
                        </li>
                    </ul>
                </section> <!-- END SECTION.TOP-BAR-SECTION -->
            </nav> <!-- END NAV.TOP-BAR -->

        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->
<!-- MAIN SECTION -->
<section class="main-section">
    <!-- CONTENT SECTION -->
    <section class="full-width content-section">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <h2>Moving aside for the Offcanvas people!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
            </div> <!-- END 12 COLUMNS -->
        </div> <!-- END ROW -->
    </section> <!-- END SECTION.CONTENT-SECTION -->

    <!-- SERVICES SECTION -->
    <section class="full-width services-section">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
            </div>

        </div> <!-- END ROW -->
    </section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

    <!-- CALL 2 ACTION -->
    <section class="full-width call-to-action">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <a href="#" class="button radius">Get in touch with us!</a>
            </div>
        </div>
    </section>
</section> <!-- END SECTION.MAIN-SECTION -->
 <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

    </div>
</div> <!-- END OFF CANVAS -->
<!-- FOOTER SECTION -->
<footer>
    <div class="row">
        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>
    </div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
    <div class="row">
        <div class="small-12 columns">
            <p>&copy; 2014</p>
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->
   <script src="<?php bloginfo('template_directory'); ?>/js/vendor/jquery.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/foundation.min.js"></script>

    <script>
    //load foundation scripts
      $(document).foundation();

    </script>

Yasir commented on Yasir's post over 5 years

forgot to mention it stops working when top-bar becomes sticky ONLY on mobile ( iphone i tested ) works fine on desktop, but i need it for mobile not desktop :)

Yasir commented on Yasir's post over 5 years

what is this ?

Yasir commented on Yasir's post over 5 years

i get this message

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: path/themes/theme_name/js/vendor/jquery.js:24

if i remove tooltip data it works fine

Yasir commented on Yasir's post over 5 years

below is the code this is in wordpress loop
```HTML

    <li data-tooltip  data-options="disable_for_touch:true" class="has-tip" title="title goes here"><a href="link_here"><img src="image_goes_here.jpg" alt=""></a></li>

Yasir commented on Yasir's post over 5 years

Okay found the issue Orbit is not included in latest version ...

http://foundation.zurb.com/develop/download.html#customizeFoundation go to javascript component section and you can't select orbit.

it should be removed from documentation too there they say you can still use it and did't mentioned that you need to include this specific orbit file separately.

finding script hope it will work than.

Posts Followed



  • 4
    Replies
  • Orbit Slider is not working

    By Yasir

    Orbitfoundation-5.2.3slider

    Hi, i'm new to Foundation just started yesterday and now i'm trying to add orbit silder but its not working, please see below html and i have foundation call THIS is not all the thing i need ? i'm using foundation 5.2.3 Before this i used http://ken... (continued)

    Last Reply by Yasir over 5 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Yasir's post over 4 years

Thanks a lot Rafi

You commented on Yasir's post over 4 years

where i can get the custom version of 5.1.1 ?

You commented on Yasir's post over 4 years

here is codepen http://codepen.io/yasirhaleem/full/jEXWge/

i think its bug with version 5.5.1 it works fine if i use 5.1.1

You commented on Yasir's post over 4 years

Thanks a lot Rafi,

Yes link is meant to take user to another page but it should't close by click inside content elsewhere.

it get close even if i click anywhere inside content :( i have form in dropdown content and when i try to input it get close is there any solution for this other than auto close false ? it should auto close if i click outside anywhere.

You commented on Yasir's post over 5 years

CODE I'M USING

IT WORKS FOR DESKTOP BUT NOT MOBILE

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
     <!-- OFF CANVAS MENU BAR -->
     <div class="sticky contain-to-grid"> 
        <nav class="tab-bar hide-for-large-up "data-topbar data-options="sticky_on: all">

            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
                <h1 class="title">Menu</h1>
            </section>

        </nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->
 </div>
        <!-- OFF CANVAS MENU -->
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Navigation</label></li>
                <li><a href="index.html">Home</a></li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="blog.html">Blog</a>
                    <ul class="off-canvas-list">
                        <li><a href="blog.html">Archive</a></li>
                        <li><a href="post.html">Single</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="page.html">Page</a>
                    <ul class="off-canvas-list">
                        <li><a href="page.html">Full-width</a></li>
                        <li><a href="sidebar-left.html">Left Sidebar</a></li>
                        <li><a href="sidebar-right.html">Right Sidebar</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li><a href="portfolio.html">Portfolio</a></li>
            </ul>
        </aside>
  <!-- HEADER SECTION -->
<header>
    <div class="row">
        <div class="small-12 medium-12 large-12 columns">
            <div class="logo">
                <h1>Foundation 5 Topbar / Offcanvas menu</h1>
            </div> <!-- END DIV.LOGO -->
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</header> <!-- END HEADER -->
 <!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
    <div class="row">
        <div class="large-12 columns">

            <!-- TOP BAR INITIALIZATION -->
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1></h1>
                    </li>
                </ul> <!-- END UL.TITLE-AREA -->

                <!-- TOP BAR MENU ELEMENTS -->
                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="has-dropdown">
                            <a href="blog.html">Blog</a>
                            <ul class="dropdown">
                                <li><a href="blog.html">Archive</a></li>
                                <li><a href="post.html">Single</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="page.html">Page</a>
                            <ul class="dropdown">
                                <li><a href="page.html">Full-wdith</a></li>
                                <li><a href="sidebar-left.html">Left Sidebar</a></li>
                                <li><a href="sidebar-right.html">Right Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li class="has-dropdown">
                            <a href="#">Dropdown</a>
                            <ul class="dropdown">
                                <li><a href="#">First link in dropdown</a></li>
                                <li><a href="#">Second link in dropdown</a></li>
                                <li><a href="#">Third link in dropdown</a></li>
                            </ul>
                        </li>
                    </ul>
                </section> <!-- END SECTION.TOP-BAR-SECTION -->
            </nav> <!-- END NAV.TOP-BAR -->

        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->
<!-- MAIN SECTION -->
<section class="main-section">
    <!-- CONTENT SECTION -->
    <section class="full-width content-section">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <h2>Moving aside for the Offcanvas people!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
            </div> <!-- END 12 COLUMNS -->
        </div> <!-- END ROW -->
    </section> <!-- END SECTION.CONTENT-SECTION -->

    <!-- SERVICES SECTION -->
    <section class="full-width services-section">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
            </div>

        </div> <!-- END ROW -->
    </section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

    <!-- CALL 2 ACTION -->
    <section class="full-width call-to-action">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <a href="#" class="button radius">Get in touch with us!</a>
            </div>
        </div>
    </section>
</section> <!-- END SECTION.MAIN-SECTION -->
 <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

    </div>
</div> <!-- END OFF CANVAS -->
<!-- FOOTER SECTION -->
<footer>
    <div class="row">
        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>
    </div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
    <div class="row">
        <div class="small-12 columns">
            <p>&copy; 2014</p>
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->
   <script src="<?php bloginfo('template_directory'); ?>/js/vendor/jquery.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/foundation.min.js"></script>

    <script>
    //load foundation scripts
      $(document).foundation();

    </script>

You commented on Yasir's post over 5 years

forgot to mention it stops working when top-bar becomes sticky ONLY on mobile ( iphone i tested ) works fine on desktop, but i need it for mobile not desktop :)

You commented on Yasir's post over 5 years

what is this ?

You commented on Yasir's post over 5 years

i get this message

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: path/themes/theme_name/js/vendor/jquery.js:24

if i remove tooltip data it works fine

You commented on Yasir's post over 5 years

below is the code this is in wordpress loop
```HTML

    <li data-tooltip  data-options="disable_for_touch:true" class="has-tip" title="title goes here"><a href="link_here"><img src="image_goes_here.jpg" alt=""></a></li>

You commented on Yasir's post over 5 years

Okay found the issue Orbit is not included in latest version ...

http://foundation.zurb.com/develop/download.html#customizeFoundation go to javascript component section and you can't select orbit.

it should be removed from documentation too there they say you can still use it and did't mentioned that you need to include this specific orbit file separately.

finding script hope it will work than.

Posts Followed

Following

  • No Content

Followers

  • No Content