CODEWITHSUNDEEP
htmlcss
DoctorKwakKwak
DoctorKwakKwak

Reputation: 21

How can I make my menu RESPONSIVE?

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

Upvotes: 2

Views: 101

Answers (3)

jacobherrington
jacobherrington

Reputation: 463

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.

Upvotes: 0

Abdullah Ahçı
Abdullah Ahçı

Reputation: 806

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

Upvotes: 0

Himanshu
Himanshu

Reputation: 490

use @Media queries

Media Queries CSS

or better use Bootstrap

Bootstrap Grid Layout for responsiveness

Upvotes: 1

Related Questions