{"id":112,"date":"2018-03-25T06:31:08","date_gmt":"2018-03-25T06:31:08","guid":{"rendered":"http:\/\/demos.codexcoder.com\/reveal\/globally-provide-access-to-mission-critical-synergy-for-2-copy-3-copy\/"},"modified":"2018-06-25T04:24:11","modified_gmt":"2018-06-25T04:24:11","slug":"globally-provide-access-to-mission-critical-synergy-for-2-copy-3-copy","status":"publish","type":"post","link":"https:\/\/demos.codexcoder.com\/reveal\/globally-provide-access-to-mission-critical-synergy-for-2-copy-3-copy\/","title":{"rendered":"How to Create Drop Down Menu with HTML and CSS"},"content":{"rendered":"

Today we\u2019re going to make a responsive dropdown menu with html and css and Jquery. Actually, I will use a little jquery code to create dropdown menu. I will show you how you can easily make a responsive dropdown menu. It\u2019s an open source project, so you can use it for your own project so let\u2019s start.<\/p>\n

You can see what you are want to make by clicking on view demo and see what happened.<\/p>\n

Read Also:\u00a0A Brand New Multipurpose Theme That You Can Use for All Websites<\/a><\/strong><\/p>\n

Table of Contents<\/u><\/strong><\/p>\n

    \n
  1. Skip to the\u00a0HTML<\/a><\/li>\n
  2. Skip to the\u00a0CSS<\/a><\/li>\n
  3. Skip to the\u00a0Jquery<\/a><\/li>\n
  4. Skip to the\u00a0Responsive<\/a><\/li>\n<\/ol>\n

    1.HTML Structure<\/h2>\n

    First of all, create html file.<\/p>\n

     <!-- start mainmenu -->\r\n <section class=\"primary-menu\">\r\n    <div class=\"container\">\r\n      <!-- small device section -->\r\n      <div class=\"responsive-menu\">\r\n        <span class=\"menu-btn\">\r\n          <i class=\"fa fa-bars\"><\/i>\r\n        <\/span>\r\n      <\/div>\r\n        <!-- end small device -->\r\n\r\n        <!-- start menu area -->\r\n      <div class=\"menu-area\">\r\n        <ul class=\"menu\">\r\n          <li><a href=\"#\">Home<\/a><\/li>\r\n          <li><a href=\"#\">Layout<\/a><\/li>\r\n          <li><a href=\"#\">Our Course<\/a>\r\n            <!-- start submenu -->\r\n        <ul class=\"submenu\">\r\n          <li><a href=\"#\">Web Development<\/a><\/li>\r\n          <li><a href=\"#\">Graphic Design<\/a><\/li>\r\n          <li><a href=\"#\">Search Engine Optimization<\/a><\/li>\r\n        <li><a href=\"#\">Wordpress theme Development<\/a><\/li>\r\n            <\/ul><!-- end submenu -->\r\n          <\/li>\r\n          <li><a href=\"#\">Online Tranning<\/a><\/li>\r\n          <li><a href=\"#\">Blog<\/a><\/li>\r\n          <li><a href=\"#\">Protfolio<\/a><\/li>\r\n          <li><a href=\"#\">About Us<\/a><\/li>\r\n        <\/ul>\r\n      <\/div><!-- end main menu area -->\r\n    <\/div>\r\n  <\/section>\r\n  <\r\n<\/pre>\n
    Menu Wrapper and Container<\/h3>\n
    Create a menu wrapper named primary-menu class which is the parent class. You may use a background color whichever you want. The container used to bring the menu into 1140px. You must used max-width:1140px for a container in CSS.<\/p>\n
     <section class=\"primary-menu\">\r\n     <div class=\"container\">\r\n<! -- For menu section   --> \r\n      <\/div>\r\n<\/section>\r\n<\/pre>\n
    Unordered List<\/h3>\n
    In this section, we make a simple menu for our project using ul tag (ul tag define as menu class).<\/p>\n
    <ul class=\"menu\">\r\n  <li><a href=\"#\">Home<\/a><\/li>\r\n  <li><a href=\"#\">Layout<\/a><\/li>\r\n  <li><a href=\"#\">Our Course<\/a><\/li>\r\n  <li><a href=\"#\">Online Training<\/a><\/li>\r\n  <li><a href=\"#\">Blog<\/a><\/li>\r\n  <li><a href=\"#\">Protfolio<\/a><\/li>\r\n  <li><a href=\"#\">About Us<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
    Nested Dropdown Menu<\/h3>\n
    Now create another unordered list into any li tag. Here create another unordered list using ul tag (ul tag define as submenu class) in our course li tag.<\/p>\n
    <ul class=\"menu\">\r\n  <li><a href=\"#\">Home<\/a><\/li>\r\n  <li><a href=\"#\">Layout<\/a><\/li>\r\n  <li><a href=\"#\">Our Course<\/a>\r\n    \r\n<! -- start submenu -->\r\n    <ul class=\"submenu\">\r\n      <li><a href=\"#\">Web Development<\/a><\/li>\r\n      <li><a href=\"#\">Graphic Design<\/a><\/li>\r\n      <li><a href=\"#\">Search Engine Optimization<\/a><\/li>\r\n      <li><a href=\"#\">Wordpress theme Development<\/a><\/li>\r\n    <\/ul><! -- End submenu -->\r\n<\/li>\r\n\r\n  <li><a href=\"#\">Online Training<\/a><\/li>\r\n  <li><a href=\"#\">Blog<\/a><\/li>\r\n  <li><a href=\"#\">Protfolio<\/a><\/li>\r\n  <li><a href=\"#\">About Us<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
    Responsive Menu<\/h3>\n
    For responsive section, we take an extra div named responsive-menu for small devices. Especially, it\u2019s visible when the device has come.I\u2019ll show how when it shows and hidden and why it\u2019s happened later.<\/p>\n
      <div class=\"responsive-menu\">\r\n    <span class=\"menu-btn\">\r\n      <i class=\"fa fa-bars\"><\/i>\r\n    <\/span>\r\n  <\/div>\r\n\r\n<\/pre>\n
    2. Styling with CSS<\/h2>\n
    After completing html structure, it\u2019s time to need styling. For styling, add file path
    \nbetween head tag.<\/p>\n
    [Since I was kept this file into assets folder inside of css folder, so used this (assets\/css\/style.css) path. You may change your path whatever you want]<\/p>\n
    Main StyleSheet<\/h3>\n
    \/* menu section *\/\r\n.primary-menu {\r\n    background: #29B899;\r\n    display: inline-block;\r\n    width: 100%;\r\n}\r\n    \/*main menu area*\/\r\n.menu-area{}\r\n.menu-area .menu{\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    width: 100%;\r\n}\r\n.menu-area .menu li{\r\n    float: left;\r\n    position: relative;\r\n}\r\n.menu-area .menu li a {\r\n    text-decoration: none;\r\n    padding: 15px 20px;\r\n    display: inline-block;\r\n    color: #fff;\r\n    transition: all .3s ease;\r\n    line-height: 28px;\r\n    text-transform: uppercase;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n}\r\n.menu-area .menu li a:hover{\r\n    background: #fff;\r\n    color: #29B899;\r\n}\r\n        \/*end main menu area*\/\r\n\r\n        \/*start submenu*\/\r\n.menu-area .menu li .submenu {\r\n    position: absolute;\r\n    width: 300px;\r\n    background: #29B899;\r\n    list-style: none;\r\n    left: 0;\r\n    display: none;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.menu-area .menu li .submenu li {\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    border-bottom: 1px solid #e0d5d5;\r\n}\r\n.menu-area .menu li .submenu li a {\r\n    display: block;\r\n}\r\n.menu-area .menu li .submenu li a:hover{\r\n}\r\n    \/*end submenu*\/\r\n\r\n\/*to working dropdown menu*\/\r\n.menu-area .menu li:hover .submenu{\r\n    display: block;\r\n}\r\n  \/*  responsive option  *\/\r\n.responsive-menu{\r\n    display: none;\r\n}\r\nspan.menu-btn{\r\n    display: block;\r\n    padding: 15px 15px;\r\n    color: #fff;\r\n    display:inline-block;\r\n}\r\n\r\n\/* responsive menu for small device*\/\r\n@media  (max-width: 768px) {\r\n.header-section{\r\n    width: 100%;\r\n    }\r\n    \/* hidden the large menu *\/\r\n.menu-area {\r\n    display: none;\r\n    }\r\n    \/*enable responsive menu*\/\r\n.responsive-menu{\r\n    display: block;\r\n    }\r\n\r\n    \/*styling menu area*\/\r\n.menu-area .menu li a{\r\n    color: #29B899;\r\n}\r\n.menu-area .menu li {\r\n    float: left;\r\n    position: relative;\r\n    width: 100%;\r\n    text-align: center;\r\n    background: #fff;\r\n    border-bottom: 1px solid #e8e8e8;\r\n}\r\n}\r\n.empty{\r\n    padding: 200px 0px;\r\n}\r\n<\/pre>\n
    Styling Primary Menu and Container<\/h3>\n
    Fixed a color of your menu and set max-width 100%.<\/p>\n
    Styling Unordered List<\/h3>\n
      \/* primary menu *\/\r\n .primary-menu {\r\n    background: #29B899;\r\n    display: inline-block;\r\n    width: 100%;\r\n}\r\n<\/pre>\n
    We want to keep the menu section between 1140px and middle of the section so for this<\/p>\n
    .container{\r\n   max-width: 1140px;\r\n   margin: auto;\r\n}\r\n<\/pre>\n
    By adding a menu-area parent class, we style this menu section.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Today we\u2019re going to make a responsive dropdown menu with html and css and Jquery. Actually, I will use a little jquery code to create dropdown menu. I will show you how you can easily make a responsive dropdown menu. It\u2019s an open source project, so you can use it for your own project so […]<\/p>\n","protected":false},"author":1,"featured_media":146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":2,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/posts\/112\/revisions\/172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/media\/146"}],"wp:attachment":[{"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demos.codexcoder.com\/reveal\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}