Jenna 009

Jenna 009

1562387395

Pure CSS Dropdown Menu With Submenu

I am sure that you know what is a dropdown menu, A dropdown menu is a list of links or items that appear whenever the button is clicked or hovered on. Every website use dropdown menu, this the best way to organize listing by category.

Today you will learn to create a drop-down menu using only HTML & CSS. This post is very useful if you are learning HTML CSS, I mean if you are a beginner in web design or development. You can use this on your next or current program after some modification. I am sure you will definitely able to create a pure CSS menu after seeing this post.

Pure CSS Dropdown Menu With Submenu Source Code

As always before sharing source code, let’s talk about it. As you can see in preview this is a simple dropdown menu with pure CSS, if you want a responsive one then check out this Responsive Navbar. I have created HTML list with <ul> and <li> for creating this menu, I have multi-time used these tags to create submenus.

For creating the icons which are after every dropdown list, I have used CSS Unicode icons (see list). In this menu, all works are done by CSS :hover property. First I place all list in their position using postion: property. At first, I just hide all the submenus and dropdown listing, they all will visible on the mouse hover.

There is nothing to explain all are these very easy to understand, you will understand easily after getting the codes. For creating this drop-down menu you have to create only 2 files, One for HTML, & one for CSS. Follow these steps to creating this without any error.

index.html

Create an HTML file named ‘index.html’ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Pure CSS DropDown Menu</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>
<body> 
<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Development</a>
 
		<ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Node JS</a></li>
                <li><a href="#">Advance JS</a>
 
		<ul>
                    <li><a href="#">Angular</a></li>
                    <li><a href="#">VUE</a></li>
                    <li><a href="#">React</a>

                        <ul>
                            <li><a href=“#”>React Native</a></li>
                            <li><a href=“#”>React JS</a></li>
                            <li><a href=“#”>Material Design</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href=“#”>Graphic Design</a>
<ul>
                <li><a href=“#”>Photoshop</a></li>
                <li><a href=“#”>Illustrator</a></li>
                <li><a href=“#”>Adobe XD</a></li>
            </ul>  
</li>
            <li><a href=“#”>Contact</a></li>
            <li><a href=“#”>About</a></li>
        </ul>
    </nav>
  <h1>Simple <span>CSS</span> DropDown Menu</h1>
 
</div>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
    font-family: ‘Quicksand’, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
margin-top: 150px;
    font-family: ‘Russo One’, sans-serif;
}
h1 span {
color: #FF4649;
}
#container {
margin: 0 auto;
}
 
nav {
margin: 35px 0;
background-color: #FF4649;
}
nav ul {
padding: 0;
        margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #FF4649;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
width:230px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:230px;
}
nav ul ul li {
border: 1px solid white;
}
li > a:after { content:  ’ ▼’; }
li > a:only-child:after { content: ‘’; }

That’s It. Now you have successfully created a Pure CSS Dropdown Menu With Submenu. In other words, Simple HTML CSS Menu with Drop Down Listing.


Thanks for reading! If you liked this post, share it with all of your programming buddies!

Further reading.

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

☞ CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners


Originally published on https://webdevtrick.com

#css #css3 #html5 #html

What is GEEK

Buddha Community

Pure CSS Dropdown Menu With Submenu
anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Einar  Hintz

Einar Hintz

1593229920

Android Menu - Steps to implement Menu in Android - DataFlair

Types of Android Menu

Let us see the various types of menu in Android:

1. Android Options Menu

The Options Menu is a collection of options for an activity. It has a set of items that are useful to perform actions. It helps us to combine multiple actions together.

Following is an example of Options Menu:

Options Menu in Android

2. PopUp Menu

Pop-Up menu is a menu that displays a list of items in a popup window. A pop-up menu appears below the view by default, in case there is no space, it appears above it.

Android Pop Up menu

3. Contextual Menu

A contextual menu is a floating menu. It appears only when the users long-press an element or right clicks on that. It generally affects the selected element.

Contextual menu

#android tutorials #android menu #android menu types #contextual menu #menu android #menu in android #options menu #types of menu in android

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

anita maity

anita maity

1620627846

Sidebar Menu Using Only HTML and CSS

In this article, I am going to show you how to create a side menu bar using only simple HTML and CSS programming code. I have designed different types of menu bars on this website (eg Top Menu, Overlay Menubar, Responsive Menu).

As you can see in the thumbnail, this is a Side Navigation Menu Bar that is based on only HTML and CSS. The input checkbox tag is used to show and hide the sidebar. That means when you click on that ‘X’ button the sidebar will be slide on the left side and the only menu button is shown (3 lines bar) and again when you click on that 3 lines bar the Sidebar will be slide-right side.
When you click on that three-line bars, the checkbox will be checked and the Side Menu Bar is shown and when you again click on that bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML input type=checkbox tag and label tag.

Download Code

#sidebar menu #html #css #side navigation menu #menu bar #html-menu

Neumorphism Card Design using HTML and CSS | Pure CSS Card

#css #html #pure css card #html and css #design