2

I created a pop menu here: https://jsfiddle.net/8f3vLh0a/1/

I tried to tweak things to formulate a perfect one but wondering how can I make it responsive. So that when you resize it it will look good on smaller devices.

here's my css:

.icon-box.home h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #E74C3C; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        border-left: 3px solid #a7382d;

}

.icon-box.home a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.aboutme h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #1dd0ad; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #0d866e;
}

.icon-box.aboutme a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.portfolio h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #3498db; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #2177b1;
}

.icon-box.portfolio a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.blog h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f1c40f; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #b8960e;
}

.icon-box.blog a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.contact h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f39c12; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #bc780d;
}

.icon-box.contact a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}





span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

.icon-box a {
    padding: 120px;
}

ANY IDEA how to make it RESPONSIVE on all browser?

JSFIDDLE PLEASE?

NOTE: NO BOOTSTRAP PLEASE

DoctorKwakKwak
  • 21
  • 2
  • you can use **bootstrap** which is best but if you don't want that then you can use `@Media` queries – Himanshu Jun 08 '16 at 12:25
  • how can use media queries? No bootstrap please. – DoctorKwakKwak Jun 08 '16 at 12:27
  • Unfortunately, this is not a good fit for stack overflow. There are many different ways to do it. You have to try one way, if it doesn't work, then you have a good question for stack overflow – Ruan Mendes Jun 08 '16 at 12:27
  • try to set `` in your head element. – Apolo Jun 08 '16 at 12:29
  • On a side note, you should combine all common css into one block. You have duplicate css attributes for all of the ```.icon-box``` classes. You should have something like ```.icon-box.contact, .icon-box.home```... etc. and then the common css – jtmingus Jun 08 '16 at 14:43

3 Answers3

1

use @Media queries

Media Queries CSS

or better use Bootstrap

Bootstrap Grid Layout for responsiveness

Himanshu
  • 490
  • 1
  • 8
  • 17
  • I would say "faster" instead of "better" for bootstrap. Native knowledge allow you to build more things, and offer more flexibility – Apolo Jun 08 '16 at 12:31
  • @Apolo Perhaps he means that Bootstrap is better for creating more readable code - though you aren't wrong. – jacobherrington Jun 08 '16 at 12:35
  • I personally don't like the bootstrap semantic, I find the classes (like `col-xs-12 col-sm-3 col-md-2 col-lg-1`) more harmful for readability. I prefer using flex and media queries. There is an excellent answer on SO about all the layouts you can achieve with flex only : http://stackoverflow.com/a/33856609/3484498 – Apolo Jun 08 '16 at 12:39
  • Another good article about how to make a powerful grid system from scratch without bootstrap : http://codepen.io/TBernard/post/an-awesome-grid – Apolo Jun 08 '16 at 12:44
0

You can take a look at this link

The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution and much more

Community
  • 1
  • 1
Abdullah Ahçı
  • 786
  • 10
  • 19
0

If you are building your site from scratch the correct CSS tool you will need is Media Queries, which are not complicated themselves.

Below is an example of a media query that refers to the iPhone 6, although it is not necessary to write a query for every device that visits your site, this may give you an idea of what the syntax looks like - you would add CSS rules inside the curly brackets.

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

If you would like to use a framework, there are many options: Bootstrap, Foundation, Toast Grid, Skeleton CSS, etc. Bootstrap is the most overwhelmingly popular, but Foundation is also very well know and widely used.

jacobherrington
  • 447
  • 4
  • 17