Menu icon Foundation

Developer | Australia

My Posts


My Comments

Miko commented on Dustin Pearce's post over 5 years

Glad is working :)

Miko commented on Miko's post over 5 years

Hey Jeremy,

The problem is that I can't find a way to keep the sidebar width fixed with the default Foundation grid.

I might have to simply use my own css for the sidebar and use Foundation grid within the content area.

Unless there is a better 'Foundation way' to do it....

<div class="container">

    <div class="sidebar">
    <!-- Fixed width sidebar -->
    </div>

    <div class="row">
        <div class="small-12 columns">
        <!-- Foundation Grid -->
        </div>
    </div>

</div>

.container {
  background: #ffffff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  overflow-x: hidden;
  padding-left: 280px;
  width: 100%;
}

.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  background: #ffffff;
}

@media only screen and (max-width: 640px) {

  body { -webkit-text-size-adjust: none; }
        .container { padding-left: 0; }
  .sidebar {
    background: #ffffff;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 45px;
    position: relative;
    width: 100%;
  }
}

Miko commented on Dustin Pearce's post over 5 years

Try this.....

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>

   <!-- start desktop navigation -->
    <div class="contain-to-grid">
        <nav class="top-bar hide-for-small" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href"http://www.dustinpearce.com">Dustin Pearce</a></h1>
                </li>  
            </ul>

            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </nav>
    </div><!-- end desktop navigation -->

    <!-- start mobile navigation -->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <nav class="tab-bar show-for-small">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title">Dustin Pearce</h1>
                </section>
            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Dustin Pearce</label></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </aside>

            <section class="main-section">


      <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


           <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


            </section>

            <a class="exit-off-canvas"></a>

        </div>
    </div><!-- end mobile navigation -->    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Miko commented on Aziz's post over 5 years

Make sure to call the Orbit JS in your page.

 <script src="js/foundation.orbit.js"></script>

Miko commented on Dustin Pearce's post over 5 years

Hi Dustin,

You can create the top navigation as per docs here:
http://foundation.zurb.com/docs/components/topbar.html

Then you can create the mobile off-canvas version as per docs here:
http://foundation.zurb.com/docs/components/offcanvas.html

Once you have created your main desktop navigation and off-canvas mobile navigation, you can use the visibility classed to hide and show the navigations according to your screen size.

For example you could add class="hide-for-small" to your desktop navigation and class="show-for-small" to your off-canvas navigation.

Take care,
M.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Dustin Pearce's post over 5 years

Glad is working :)

You commented on Miko's post over 5 years

Hey Jeremy,

The problem is that I can't find a way to keep the sidebar width fixed with the default Foundation grid.

I might have to simply use my own css for the sidebar and use Foundation grid within the content area.

Unless there is a better 'Foundation way' to do it....

<div class="container">

    <div class="sidebar">
    <!-- Fixed width sidebar -->
    </div>

    <div class="row">
        <div class="small-12 columns">
        <!-- Foundation Grid -->
        </div>
    </div>

</div>

.container {
  background: #ffffff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  overflow-x: hidden;
  padding-left: 280px;
  width: 100%;
}

.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  background: #ffffff;
}

@media only screen and (max-width: 640px) {

  body { -webkit-text-size-adjust: none; }
        .container { padding-left: 0; }
  .sidebar {
    background: #ffffff;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 45px;
    position: relative;
    width: 100%;
  }
}

You commented on Dustin Pearce's post over 5 years

Try this.....

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>

   <!-- start desktop navigation -->
    <div class="contain-to-grid">
        <nav class="top-bar hide-for-small" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href"http://www.dustinpearce.com">Dustin Pearce</a></h1>
                </li>  
            </ul>

            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </nav>
    </div><!-- end desktop navigation -->

    <!-- start mobile navigation -->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <nav class="tab-bar show-for-small">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title">Dustin Pearce</h1>
                </section>
            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Dustin Pearce</label></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </aside>

            <section class="main-section">


      <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


           <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


            </section>

            <a class="exit-off-canvas"></a>

        </div>
    </div><!-- end mobile navigation -->    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

You commented on Aziz's post over 5 years

Make sure to call the Orbit JS in your page.

 <script src="js/foundation.orbit.js"></script>

You commented on Dustin Pearce's post over 5 years

Hi Dustin,

You can create the top navigation as per docs here:
http://foundation.zurb.com/docs/components/topbar.html

Then you can create the mobile off-canvas version as per docs here:
http://foundation.zurb.com/docs/components/offcanvas.html

Once you have created your main desktop navigation and off-canvas mobile navigation, you can use the visibility classed to hide and show the navigations according to your screen size.

For example you could add class="hide-for-small" to your desktop navigation and class="show-for-small" to your off-canvas navigation.

Take care,
M.

Posts Followed

Following

  • No Content

Followers

  • No Content