CODEWITHSUNDEEP
htmlcss
user2710234
user2710234

Reputation: 3225

Make CSS menu responsive and each item certain width

I am using this CSS Code for a HTML menu:

#CustomerMenu {
    margin-bottom:35px;
}
#CustomerMenu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
    -moz-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
    box-shadow: 0 0 5px rgba(243, 111, 37, 5);
}
#CustomerMenu ul li {
    display: inline-block;
    position:relative;
}
#CustomerMenu ul li a {
    font: bold 12px/18px Arial;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
#CustomerMenu ul li a:hover {
    background: #F36F25;
    color: #FFFFFF;
}
#CustomerMenu ul li:hover > a {
    background-color: #F36F25;
    color: #FFFFFF;
}
#CustomerMenu ul li ul {
    padding: 0;
    position: absolute;
    z-index:999;
    top: 34px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
#CustomerMenu ul li ul li a {
    background: #666666;
    display: block;
    color: #FFFFFF;
    width:100px;
}
#CustomerMenu ul li ul li a:hover {
    background: #F35F25;
}
#CustomerMenu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

i want to make each <li> link a certain width whether it be a percentage or fixed

Also, can i make the menu responsive, whats the best jway to do this?

http://jsfiddle.net/ko69pyLz/

Upvotes: 1

Views: 84

Answers (2)

knocked loose
knocked loose

Reputation: 3304

As the user Manjunath Siddappa stated, I'm not adding full code, or in this case, my example won't be using your code.

For the sizing part of it, you will need to use media queries, but since you want a mobile nav, you most likely want it to pull up into one large drop down bar, and that's where this comes in..

This code will help you create a mobile nav that can get vertically stacked/hidden, and then uses a onClick jQuery function to open and close the options.

JsFiddle: http://jsfiddle.net/qy6a185b/

Upvotes: 0

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

Use media queries

i am not adding full code, just showing how you can proceed, there are plenty of tutorials available in online.

@media screen and (min-width:0px) and (max-width:480px), 
screen and (min-device-width:0px) and (max-device-width:480px){

    #CustomerMenu ul li {
        display: block;
    }
    #CustomerMenu ul li a {
        font: bold 24px/36px Arial;
    }
}

JSfiddle - resize the browser to atake effect

http://jsfiddle.net/ko69pyLz/5/

Upvotes: 3

Related Questions