Transitioning smoothly from mobile to tablet views with the sidebar activated in Semantic-UI

Question

Transitioning smoothly from mobile to tablet views with the sidebar activated in Semantic-UI

My HTML includes a pointing menu when the screen width exceeds 630px. Below 630px, it switches to a sidebar with a menu button:

<nav class="ui inverted sidebar menu vertical slide out" id="m_menu">
<a href="index.php" class="item">
    <i class="home icon"></i>Home
  </a>

  <a href="about.php" class="item">
    <i class="user icon"></i>User
  </a>

  <a href="portfolio.php" class="item">
    <i class="archive icon"></i> Portfolio
  </a>
</nav>

<div id="menuDiv">
  <nav class="ui inverted fluid four item pointing menu" id="menu">

    <a href="index.php" class="item">
      <i class="home icon"></i>Home
    </a>

    <a href="about.php" class="item">
      <i class="user icon"></i>User
    </a>

    <a href="portfolio.php" class="item">
      <i class="archive icon"></i> Portfolio
    </a>

    <a href="contact.php" class="item">
      <i class="message icon"></i> Contact
    </a>

  </nav>

  <div class="ui labeled icon button black" id="m_btn">
    <i class="icon list layout"></i> Menu
  </div>
</div>


<img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs">

This is my CSS styling:

  body{
 margin:0;
  padding:0;
  font-family:"helvetica",arial;
}

#menuDiv{
  margin:40px 40px 0 40px;
  text-align:center;
}

#menu:{
  max-width:1024px;
  margin:0 auto;
}

#m_btn{display:none;}

img{
  width:100%;
  height:auto;
  position:absolute;
  top:0;
  z-index:-1;
}

@media all and (max-width:630px)
{
  #menu{display:none;}
  #m_btn{
    display:inline-block;
  }
}

/*fails to fix sidebar sidebar showing @width>=631px*/
@media all and (min-width:631px)
{
    /*suggested on tutsplus,no change on applying*/
    body.pushable{margin-left:0 !important;}
    #m_menu.visible{
      display:none;  
    }
}

Upon resizing the screen to 630px or lower, the horizontal navigation bar menu disappears while a centered button appears. A screenshot can be found here

If I open the sidebar and resize the screen to a width greater than 630px, the menu items disappear but the sidebar remains visible. Another screenshot is available here

I am looking for a solution to ensure that the sidebar also disappears when open at resolutions over 630px.

EDIT:

While the sidebar is open, Semantic UI wraps everything else in a pusher class and adds a pushable class to the body. It utilizes the visible class to indicate the sidebar's status, prompting me to try:

   @media all and (min-width:631px)
  {
    /*suggested on tutsplus,no change on applying*/
    body.pushable{margin-left:0 !important;}
    #m_menu.visible{
      display:none;  
    }
  }

Here is a visual representation of the DOM with the sidebar visible:

  <body class="pushable">
     <nav class="ui inverted sidebar menu vertical slide out uncover left animating visible" id="m_menu">
  <a href="index.php" class="item">
    <i class="home icon"></i>Home
  </a>

  <a href="about.php" class="item">
    <i class="user icon"></i>User
  </a>

  <a href="portfolio.php" class="item">
    <i class="archive icon"></i> Portfolio
  </a>
</nav>

<div class="pusher dimmed"><div id="menuDiv">
  <nav class="ui inverted fluid four item pointing menu" id="menu">

    <a href="index.php" class="item">
      <i class="home icon"></i>Home
    </a>

    <a href="about.php" class="item">
      <i class="user icon"></i>User
    </a>

    <a href="portfolio.php" class="item">
      <i class="archive icon"></i> Portfolio
    </a>

    <a href="contact.php" class="item">
      <i class="message icon"></i> Contact
    </a>

  </nav>

  <div class="ui labeled icon button black" id="m_btn">
    <i class="icon list layout"></i> Menu
  </div>
</div><img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs"></div>
</body>

Check out this jsfiddle and a runnable demo

jquery html css responsive-design semantic-ui

Answer 1

Answer №1

Thank you for the recent updates to the Fiddle example. It seems that there is a conflict arising from the visual changes applied through both CSS and jQuery. Additionally, there is no existing code to hide the mobile menu when transitioning back to desktop screen size.

To address this issue, I propose making adjustments to the CSS to accommodate significant visual alterations based on each specific media query. Similarly, I suggest implementing corresponding modifications in the jQuery code by utilizing a listener to monitor screen width changes.

Here's a demonstration of these solutions in action: Fiddle

CSS Updates:

During instances where scripts are disabled, it is crucial for your CSS to handle essential functionalities to avoid potential page malfunctions. Prioritizing CSS over JavaScript can lead to optimized page loading times.

It is imperative to clearly define the behaviors of mobile and non-mobile elements when altering them using media queries. Specifically stating the states (showing/hidden) helps maintain consistency.

Mobile Layout:

@media all and (max-width:630px) {

/* Initially hide the main menu */
    #menu {
      display:none;
    }
/* Subsequently show the mobile menu */
    #m_menu {
        display:block;
    }
/* Lastly, display the mobile menu button */
    #m_btn{
        display:inline-block;
    }
}

Desktop Layout:

Reverse the adjustments made for the mobile version:

@media all and (min-width:631px) {
/* Conceal the mobile menu */
    #m_menu {
        display:none;
    }
/* Reveal the regular menu */
    #menu{
      display:block;
    }
/* Finally, hide the mobile menu button */
    #m_btn{
       display:none;
   }    
}

An alternative approach involves removing the media query encompassing desktop styles entirely, as any styles defined outside of (max-width:630px) will apply once 630px limit is exceeded.

jQuery Implementation:

Add a listener to detect shifts in width beyond the designated breakpoint. To account for precise breakpoints, it may be necessary to use a value such as 617 which aligns closely with the media query breakpoints.

Note that this functionality specifically targets screen resizing events triggered by user actions like adjusting browser dimensions or changing device orientation.

Within the conditional statement set up to activate only upon resizing to desktop size, forcibly hide the #m_menu.

$(window).resize(function() {
// Determine whether the resized screen falls within mobile or desktop width
    if($(window).width() > 617) {
        console.log('desktop'); 
        $('#m_menu').sidebar('hide');
    }
    else {
       console.log('mobile');
    }
});

For improved efficiency, exploring alternate methods for handling the resize event beyond using .resize() is recommended, as frequent firing of this event can impact page performance.

In my experience developing responsive websites, establishing a 'conditional JavaScript' snippet tailored to mirror the behavior of media queries has proven to be advantageous in similar scenarios.

Answer 2

Thank you for the recent updates to the Fiddle example. It seems that there is a conflict arising from the visual changes applied through both CSS and jQuery. Additionally, there is no existing code to hide the mobile menu when transitioning back to desktop screen size.

To address this issue, I propose making adjustments to the CSS to accommodate significant visual alterations based on each specific media query. Similarly, I suggest implementing corresponding modifications in the jQuery code by utilizing a listener to monitor screen width changes.

Here's a demonstration of these solutions in action: Fiddle

CSS Updates:

During instances where scripts are disabled, it is crucial for your CSS to handle essential functionalities to avoid potential page malfunctions. Prioritizing CSS over JavaScript can lead to optimized page loading times.

It is imperative to clearly define the behaviors of mobile and non-mobile elements when altering them using media queries. Specifically stating the states (showing/hidden) helps maintain consistency.

Mobile Layout:

@media all and (max-width:630px) {

/* Initially hide the main menu */
    #menu {
      display:none;
    }
/* Subsequently show the mobile menu */
    #m_menu {
        display:block;
    }
/* Lastly, display the mobile menu button */
    #m_btn{
        display:inline-block;
    }
}

Desktop Layout:

Reverse the adjustments made for the mobile version:

@media all and (min-width:631px) {
/* Conceal the mobile menu */
    #m_menu {
        display:none;
    }
/* Reveal the regular menu */
    #menu{
      display:block;
    }
/* Finally, hide the mobile menu button */
    #m_btn{
       display:none;
   }    
}

An alternative approach involves removing the media query encompassing desktop styles entirely, as any styles defined outside of (max-width:630px) will apply once 630px limit is exceeded.

jQuery Implementation:

Add a listener to detect shifts in width beyond the designated breakpoint. To account for precise breakpoints, it may be necessary to use a value such as 617 which aligns closely with the media query breakpoints.

Note that this functionality specifically targets screen resizing events triggered by user actions like adjusting browser dimensions or changing device orientation.

Within the conditional statement set up to activate only upon resizing to desktop size, forcibly hide the #m_menu.

$(window).resize(function() {
// Determine whether the resized screen falls within mobile or desktop width
    if($(window).width() > 617) {
        console.log('desktop'); 
        $('#m_menu').sidebar('hide');
    }
    else {
       console.log('mobile');
    }
});

For improved efficiency, exploring alternate methods for handling the resize event beyond using .resize() is recommended, as frequent firing of this event can impact page performance.

In my experience developing responsive websites, establishing a 'conditional JavaScript' snippet tailored to mirror the behavior of media queries has proven to be advantageous in similar scenarios.

Answer 3

Answer №2

I stumbled upon a resolution to the issue by utilizing enquirejs, a tool that can detect media queries being matched and unmatched.

  <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script>

  var query='all and (min-width : 631px)';
  enquire.register(query,function(){
   $('#m_menu').sidebar('hide');
  });

Here is a JSFiddle link and a Runnable example showcasing this solution.

Answer 4

I stumbled upon a resolution to the issue by utilizing enquirejs, a tool that can detect media queries being matched and unmatched.

  <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script>

  var query='all and (min-width : 631px)';
  enquire.register(query,function(){
   $('#m_menu').sidebar('hide');
  });

Here is a JSFiddle link and a Runnable example showcasing this solution.

Transitioning smoothly from mobile to tablet views with the sidebar activated in Semantic-UI

EDIT:

Answer №1

Answer №2

Similar questions

Customize the month template of the Kendo datepicker calendar popup in an AngularJS application

What is the Angular alternative to control.disable when working with a QueryList?

The jQuery bxSlider is failing to function properly in a responsive design

Unable to integrate an if/else statement into the JSON reply

I'll show you how to implement custom fonts in TailwindCSS and NuxtJS!

Ensuring Proper Alignment of Headers in CSS

Enhance your text area by incorporating text using jQuery

What is the best way to eliminate excessive margin-bottom on a floating image?

What are the methods for managing HTML encoding with the python win32com package?

Encountering a jQuery error while attempting to initiate an AJAX request

Horizontal scroll box content is being truncated

Retrieving Data from Outside Source using AngularJS

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Local storage synchronization in progress, please hold on

What is the best way to automatically show scrollbars when a page loads using JavaScript?

Setting the Content-Type of a JavaScript file within a NodeJS application

Using the max-width property with Semantic UI Dropdown in ReactJS

Why is my AngularJS application triggering two events with a single click?

The issue of CSS transitions flickering in Internet Explorer

broadcast a video file from a Node.js server to multiple HTML5 clients at the same time