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

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Sending a jQuery variable to a static image source within a Django template

Is it possible to dynamically alter the text and contrast of your entire website?

The timeline shows the movement of the jQuery object

"An issue with PHP not receiving any data from AJAX POST request

Merging two functions for concealing an element

`The header navigation is not responding to window resizing functionality`

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

The horizontal scrollbar is not displaying

Verify for a class that does not exist

How to retrieve the initial element of a specific tag using jQuery

Issue with Bootstrap collapsible menu not expanding when clicked

The properties of the box model applied to unidentified inline boxes

Guide on incorporating an external HTML file into an ASP.NET webpage

The aoColumns functionality in datatables seems to be malfunctioning

Utilizing C# dynamic variable within inline CSS for an element (MVC)

Issue with JavaScript function loading website homepage solely is functioning only for the first time

The alert stubbornly refuses to close even when attempting to do so

Having difficulty processing information retrieved from an ajax request in jQuery

Struggles encountered when choosing the initial visible item