CODEWITHSUNDEEP
htmlcssmedia-queries
Freddy
Freddy

Reputation: 867

Create div when screen is resized

Is it possible to create a div when a screen is resized with just HTML and media queries?

For example, here is a visual of what I am trying to achieve: enter image description here

The issue is that in my structure, I have both the logo div and navigation in one parent div, but when the screen is resized, I want the navigation div to be a separate entity (with different styles)

Here is my current div structure: 

nav-container
   logo-holder
   navigation-div
      nav

Is it possible? Here is my current approach:

html,
body {
  height: 100%;
  background-color: #fff;
}

body {
  background-color: #fff;
  text-align: center;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  display: block;
}

.site-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  display: flex;
  flex-wrap: wrap;
}

.nav-container {
  border-right: 0.5px solid #333;
  height: 100%;
  width: 200px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-holder {
  position: absolute;
  top: 0;
  text-align: center;
}

#navigation-div {
  margin-top: -300px;
  width: 100%;
}

.nav-ul li a {
  display: block;
}

.nav-link {
  width: 100%;
  display: block;
  text-align: left;
  color: #fff;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #fff;
  color: #333;
}

.nav ul {
  width: 100%;
  padding-left: 0px;
}

.nav ul li {
  list-style-type: none;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  margin-left: 15px;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 160px;
    background-color: #333;
    border-bottom: 0.5px solid #333;
  }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder {
    display: inline;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  #navigation-div {
    border: 1px solid red;
  }
  .responsive {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav {
    overflow: hidden;
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .nav ul li {
    font-size: 1.2em;
    line-height: 20px;
    height: 20px;
    border-bottom: 1px solid #888;
    float: left;
  }
  .nav ul li a {
    text-align: center;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s;
  }
  /* on screen resize make new div appear */
}
<div class="site-wrapper">

  <div class="nav-container responsive">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>Home</li>
          </a>
          <a class="nav-link" href="">
            <li>Blog</li>
          </a>
          <a class="nav-link" href="">
            <li>Store</li>
          </a>
          <a class="nav-link" href="">
            <li>Contact</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
</div>

Upvotes: 0

Views: 41

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371629

Consider two separate HTML structures for this section.

One div serves desktop. The other serves mobile.

When the desktop version is active, the mobile version has display: none. And vice versa.

Here's a simple example of how this works:

#large-image { display: block; }
#small-image { display: none; }

@media (max-width: 500px) {
    #large-image { display: none; }
    #small-image { display: block; }
}
<div>
  <img id="large-image" src="http://i.imgur.com/60PVLis.png" height="200" width="200" alt="">
  <img id="small-image" src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
</div>

jsFiddle demo

Upvotes: 1

Liaqat Saeed
Liaqat Saeed

Reputation: 428

You can add a div like this by using jQuery

jQuery(window).resize(function(){
$('body').append('<div style="background-color:red,height:20px;width:20px">This is your Div</div>');
});

with media query you can Show or Hide any Div depending upon window size

for Example:

<div id="foo" style="display:none;height:20px;width:20px;"></div>

I want to show this div when Screen size is less than 767px

Using Media Query

  @@media only screen and (max-width: 767px) {
#foo{
display:block;
}
}

You can Take and idea from this Concept Cheers

Upvotes: 0

Related Questions