Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Responsive menu

    @shristi.shandilya
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 352
    Comment on it

    hii,

    i am sharing a simple responsive menu code i.e html and css which you can use whenever you want to create a responsive menu.

    HTML:

    1. <div id='Responsivemenu'>
    2. <ul>
    3.    <li class='first'><a href='#'><span>Home</span></a></li>
    4.    <li><a href='#'><span>Products</span></a></li>
    5.    <li><a href='#'><span>Company</span></a></li>
    6.    <li class='last'><a href='#'><span>Contact</span></a></li>
    7. </ul>
    8. </div>

    CSS:

    2. #Responsivemenu {
    3.   background: #0693CA;
    4.   width: auto;
    5. }
    6. #Responsivemenu ul {
    7.   list-style: none;
    8.   margin: 0;
    9.   padding: 0;
    10.   line-height: 1;
    11.   display: block;
    12.   zoom: 1;
    13. }
    14. #Responsivemenu ul:after {
    15.   content: " ";
    16.   display: block;
    17.   font-size: 0;
    18.   height: 0;
    19.   clear: both;
    20.   visibility: hidden;
    21. }
    22. #Responsivemenu ul li {
    23.   display: inline-block;
    24.   padding: 0;
    25.   margin: 0;
    26. }
    27. #Responsivemenu.align-right ul li {
    28.   float: right;
    29. }
    30. #Responsivemenu.align-center ul {
    31.   text-align: center;
    32. }
    33. #Responsivemenu ul li a {
    34.   color: #ffffff;
    35.   text-decoration: none;
    36.   display: block;
    37.   padding: 15px 25px;
    38.   font-family: 'Open Sans', sans-serif;
    39.   font-weight: 700;
    40.   text-transform: uppercase;
    41.   font-size: 14px;
    42.   position: relative;
    43.   transition: color .25s;
    44. }
    45. #Responsivemenu ul li a:hover {
    46.   color: #333333;
    47. }
    48. #Responsivemenu ul li a:hover:before {
    49.   width: 100%;
    50. }
    51. #Responsivemenu ul li a:after {
    52.   content: "";
    53.   display: block;
    54.   position: absolute;
    55.   right: -3px;
    56.   top: 19px;
    57.   height: 6px;
    58.   width: 6px;
    59.   background: #ffffff;
    60.   opacity: .5;
    61. }
    62. #Responsivemenu ul li a:before {
    63.   content: "";
    64.   display: block;
    65.   position: absolute;
    66.   left: 0;
    67.   bottom: 0;
    68.   height: 3px;
    69.   width: 0;
    70.   background: #333333;
    71.   transition: width .25s;
    72. }
    73. #Responsivemenu ul li.last > a:after,
    74. #Responsivemenu ul li:last-child > a:after {
    75.   display: none;
    76. }
    77. #Responsivemenu ul li.first a {
    78.   color: #333333;
    79. }
    80. #Responsivemenu ul li.first a:before {
    81.   width: 100%;
    82. }
    83. #Responsivemenu.align-right li.last > a:after,
    84. #Responsivemenu.align-right li:last-child > a:after {
    85.   display: block;
    86. }
    87. #Responsivemenu.align-right li:first-child a:after {
    88.   display: none;
    89. }
    90. @media screen and (max-width: 768px) {
    91.   #Responsivemenu ul li {
    92.     float: none;
    93.     display: block;
    94.   }
    95.   #Responsivemenu ul li a {
    96.     width: 100%;
    97.     box-sizing: border-box;
    98.     border-bottom: 1px solid #000000;
    99.   }
    100.   #Responsivemenu ul li.last > a,
    101.   #Responsivemenu ul li:last-child > a {
    102.     border: 0;
    103.   }
    104.   #Responsivemenu ul li a:after {
    105.     display: none;
    106.   }
    107.   #Responsivemenu ul li a:before {
    108.     display: none;
    109.   }
    110. }
    111.  

     

    HTML tags css Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: