javascript - Change Side Nav Bar on window size change

I am trying to make a side nav for a website. So far I am using a <nav> element and filling it with <li> to create my side bar.

So far my code is below (p.s in-line styling is just for testing, I will be using an external css file later on):

<body>

<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
    <li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>

<div class="container" ng-controller="projectController">
</div>
</body>

The above code outputs the following:

Whats my issue!

I am trying to change the side nav bar if the user resizes their window or maybe they access the site from a iPad or iPhone etc.

If the screen is full-size display this (I am already displaying this)

But if the screen size goes below a certain size the nav bar automatically changes to:

I am not sure how to develop this functionality. Can anyone guide me in the right direction. If you need any more information please let me know.

Thanks in advance.

I am trying to make a side nav for a website. So far I am using a <nav> element and filling it with <li> to create my side bar.

So far my code is below (p.s in-line styling is just for testing, I will be using an external css file later on):

<body>

<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
    <li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>

<div class="container" ng-controller="projectController">
</div>
</body>

The above code outputs the following:

Whats my issue!

I am trying to change the side nav bar if the user resizes their window or maybe they access the site from a iPad or iPhone etc.

If the screen is full-size display this (I am already displaying this)

But if the screen size goes below a certain size the nav bar automatically changes to:

I am not sure how to develop this functionality. Can anyone guide me in the right direction. If you need any more information please let me know.

Thanks in advance.

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Oct 14, 2015 at 10:02 Skywalker 5,20417 gold badges66 silver badges127 bronze badges

5 Offtopic: you should wrap you <li>s inside an <ul> or <ol>. Ontopic: place the images and text in separate elements, for example: <li><img/><span>text</span></li>. Then use media queries to define if you want to see them or not. Big screen, show both, small screen, only show img, hide span. – GreyRoofPigeon Commented Oct 14, 2015 at 10:04
You will need to use @media querys – NooBskie Commented Oct 14, 2015 at 10:05
@LinkinTED Thank you for the reply. By hiding the span to hide the text would that change the width of the nav bar automatically as displayed in the image above? – Skywalker Commented Oct 14, 2015 at 10:14
@user2190986, depends on your code. Read some tutorials (like css-tricks./css-media-queries) about media queries. By defining a break point, you can switch between different styles for different sizes. – GreyRoofPigeon Commented Oct 14, 2015 at 10:22
1 do a search for css media queries, it allows you to change the layout based on screen size – Pete Commented Oct 14, 2015 at 10:43

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Heres a pretty crude example with pure css but could be used as a base, you could add transitions ect to the breakpoint as well to make it look snazzier

Codepen http://codepen.io/noobskie/pen/XmeXEo?editors=110

HTML

<nav role='navigation'>
  <ul>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>About</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Clients</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Contact Us</span></a></li>
  </ul>
</nav>

CSS

body{
  margin:0;
}
nav{
  background:#2F404F;
  height: 100vh;
  width:auto;
  position:fixed;
  ul{
    margin:0;
    padding:0;
  }
  li{
    position: relative; 
    display: block;
    padding:20px 10px;
    border-bottom:1px solid #000;
    a{
      color:#FFF;
      text-decoration:none;
      font-size:1.3em;
      i{
        padding:0 5px 0 0;
      }
    }
  }
}


@media only screen and (max-width: 768px) {
  span{
    display:none;
  }
}

Have two different spans in your li.

<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;"><span class="showLarge">Large vieport</span><span class="showTablet">Tablet vieport</span></li>

By default:

.showTablet {
    display: none;
}

For tablet viewports:

@media only screen and (max-width: 768px) {
    .showLarge {
        display: none;
    }
    .showTablet {
       display: block;
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change Side Nav Bar on window size change - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)