Scribd
Carica
14 visualizzazioni

CSS Dropdown

CSS Drop down Menu

Caricato da

Aminul Islam
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
14 visualizzazioni

CSS Dropdown

CSS Drop down Menu

Caricato da

Aminul Islam
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 27

Pythonacademy/webdev/css Dropdown Menu

CSS Dropdown

CSS+HTML CODE
<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming

</li>
<li class="mainmenu-webdev"> WebDev </li>
<li class="mainmenu-embedded"> Embedded </li>
<li class="mainmenu-about"> About </li>
</ul>
</div>

</body>
</html>

OUTPUT

1
Pythonacademy/webdev/css Dropdown Menu

CSS+HTML CODE

<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

.menubar {
background-color: #007bff;
}

.menubar ul {
display: inline-flex;
list-style-type: none;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming

</li>
<li class="mainmenu-webdev"> WebDev </li>
<li class="mainmenu-embedded"> Embedded </li>
<li class="mainmenu-about"> About </li>
</ul>
</div>

</body>
</html>

OUTPUT

2
Pythonacademy/webdev/css Dropdown Menu

New CSS Rule

.menubar ul li {
background-color: #007bff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}

Effect:

New CSS Rule

.menubar ul li:hover {
background-color: #0062cc;
}

Effect:

3
Pythonacademy/webdev/css Dropdown Menu

Step 1: Menu Bar Designed with CSS and HTML only

<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

.menubar {
background-color: #007bff;
}

.menubar ul {
display: inline-flex;
list-style-type: none;
}

.menubar ul li {
background-color: #007bff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}

.menubar ul li:hover {
background-color: #0062cc;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming

</li>
<li class="mainmenu-webdev"> WebDev </li>

4
Pythonacademy/webdev/css Dropdown Menu

<li class="mainmenu-embedded"> Embedded </li>


<li class="mainmenu-about"> About </li>
</ul>
</div>

</body>
</html>

OUTPUT

ADDING Sub Menu

HTML Code:
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming
<!-- Programming Sub Menu -->
<div class="programming-submenu">
<ul>
<li class="submenu-c"> C </li>
<li class="submenu-python"> Python </li>
<li class="submenu-database"> Database </li>
</ul>
</div>
<!-- End of Programming Sub Menu -->
</li>
<li class="mainmenu-webdev"> WebDev </li>
<li class="mainmenu-embedded"> Embedded </li>
<li class="mainmenu-about"> About </li>
</ul>
</div>
</body>

Output:

5
Pythonacademy/webdev/css Dropdown Menu

Styling Sub Menu

.programming-submenu {
display:none;
}

Output (Submenu not appeared):

Appending New CSS Rule

.mainmenu-programming:hover .programming-submenu {
display: block;
position:absolute;
margin-top: 15px;
margin-left: 15px;
}

Output (submenu appeared while hover):

6
Pythonacademy/webdev/css Dropdown Menu

Appending New CSS Rule

.mainmenu-programming:hover .programming-submenu ul {
display:block;
}

Output (submenu list appeared in block form):

Styling Submenu List Items

.programming-submenu ul li:hover {
background-color: #0062cc;
}

Output (changing background color while hovering submenu list):

7
Pythonacademy/webdev/css Dropdown Menu

Step 2: Menu Bar With Submenu designed with CSS and HTML only
<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

.menubar {
background-color: #007bff;
}

.menubar ul {
display: inline-flex;
list-style-type: none;
}

.menubar ul li {
background-color: #007bff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}

.menubar ul li:hover {
background-color: #0062cc;
}

.programming-submenu {
display:none;
}

.mainmenu-programming:hover .programming-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

8
Pythonacademy/webdev/css Dropdown Menu

.mainmenu-programming:hover .programming-submenu ul {
display:block;
}

.programming-submenu ul li:hover {
background-color: #0062cc;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming
<!-- Programming Sub Menu -->
<div class="programming-submenu">
<ul>
<li class="submenu-c"> C </li>
<li class="submenu-python"> Python </li>
<li class="submenu-database"> Database </li>
</ul>
</div>
<!-- End of Programming Sub Menu -->
</li>
<li class="mainmenu-webdev"> WebDev </li>
<li class="mainmenu-embedded"> Embedded </li>
<li class="mainmenu-about"> About </li>
</ul>
</div>

</body>
</html>

Output:

9
Pythonacademy/webdev/css Dropdown Menu

Step 3: Adding Advanced Menu and Other Submenus


<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

.menubar {
background-color: #007bff;
}

.menubar ul {
display: inline-flex;
list-style-type: none;
}

.menubar ul li {
background-color: #007bff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}

.menubar ul li:hover {
background-color: #0062cc;
}

/* Styling Sub Menu Programming */


.programming-submenu {
display:none;
}

.mainmenu-programming:hover .programming-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

10
Pythonacademy/webdev/css Dropdown Menu

.mainmenu-programming:hover .programming-submenu ul {
display:block;
}

.programming-submenu ul li {
font-size: 1.25rem;
}

.programming-submenu ul li:hover {
background-color: #0062cc;
}

/* Styling Sub Menu WebDev */


.webdev-submenu {
display:none;
}

.mainmenu-webdev:hover .webdev-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

.mainmenu-webdev:hover .webdev-submenu ul {
display:block;
}

.webdev-submenu ul li {
font-size: 1.25rem;
}

.webdev-submenu ul li:hover {
background-color: #0062cc;
}

/* Styling Sub Menu Embedded */


.embedded-submenu {
display:none;
}

.mainmenu-embedded:hover .embedded-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

11
Pythonacademy/webdev/css Dropdown Menu

.mainmenu-embedded:hover .embedded-submenu ul {
display:block;
}

.embedded-submenu ul li {
font-size: 1.25rem;
}

.embedded-submenu ul li:hover {
background-color: #0062cc;
}

/* Styling Sub Menu Advanced */


.advanced-submenu {
display:none;
}

.mainmenu-advanced:hover .advanced-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

.mainmenu-advanced:hover .advanced-submenu ul {
display:block;
}

.advanced-submenu ul li {
font-size: 1.25rem;
}

.advanced-submenu ul li:hover {
background-color: #0062cc;
}

/* Styling Sub Menu About */


.about-submenu {
display:none;
}

.mainmenu-about:hover .about-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

.mainmenu-about:hover .about-submenu ul {
display:block;

12
Pythonacademy/webdev/css Dropdown Menu

.about-submenu ul li {
font-size: 1.25rem;
}

.about-submenu ul li:hover {
background-color: #0062cc;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming
<!-- Programming Sub Menu -->
<div class="programming-submenu">
<ul>
<li class="submenu-c"> C </li>
<li class="submenu-python"> Python </li>
<li class="submenu-database"> Database </li>
</ul>
</div>
<!-- End of Programming Sub Menu -->
</li>
<li class="mainmenu-webdev"> WebDev
<!-- WebDev Sub Menu -->
<div class="webdev-submenu">
<ul>
<li class="submenu-frontend"> Front End </li>
<li class="submenu-serverside"> Server Side </li>
<li class="submenu-fullstack"> Full Stack </li>
</ul>
</div>
<!-- End of WebDev Sub Menu -->
</li>
<li class="mainmenu-embedded"> Embedded
<!-- Embedded Sub Menu -->
<div class="embedded-submenu">
<ul>
<li class="submenu-arduino"> Arduino </li>
<li class="submenu-micropython"> Micro Python </li>
</ul>
</div>
<!-- End of Embedded Sub Menu -->
</li>

13
Pythonacademy/webdev/css Dropdown Menu

<li class="mainmenu-advanced"> Advanced


<!-- Advanced Sub Menu -->
<div class="advanced-submenu">
<ul>
<li class="submenu-electronics"> Electronics </li>
<li class="submenu-mechatronics"> Mechatronics </li>
<li class="submenu-robotics"> Robotics </li>
<li class="submenu-industrialautomation"> Industrial
Automation </li>
</ul>
</div>
<!-- End of Advanced Sub Menu -->
</li>

<li class="mainmenu-about"> About


<!-- About Sub Menu -->
<div class="about-submenu">
<ul>
<li class="submenu-mission"> Mission </li>
<li class="submenu-vision"> Vision </li>
<li class="submenu-contactus"> Contact Us </li>
</ul>
</div>
<!-- End of About Sub Menu -->
</li>

</ul>
</div>

</body>
</html>

OUTPUTS

About Submenu
---------------------

14
Pythonacademy/webdev/css Dropdown Menu

Advanced Submenu
--------------------------

Embedded Submenu
--------------------------

WebDev Submenu
--------------------------

Programming Submenu
------------------------------

15
Pythonacademy/webdev/css Dropdown Menu

Adding Level 2 Sub Menu

1) Turning cursor to default slopped arrow. It will be changed to hand pointer when the sub-
menu opens a page along with the click action.

<head>
<style>
.menubar ul li {
background-color: #007bff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: default;
}

</style>
</head>

Output:

2) Adding Level-2 menu in the body section (Programming ---> C ---> C++):

<!-- Programming Sub Menu -->


<div class="programming-submenu">
<ul>
<li class="submenu-c"> C
<!-- C Sub Menu -->
<div class="c-submenu">
<ul>
<li> <a class="submenu-link"
href="pages/programming/c/c-basic.html"> C Basic </a> </li>
<li> <a class="submenu-link"
href="pages/programming/c/c++.html"> C++ </a> </li>
<li> <a class="submenu-link"
href="pages/programming/c/c-sharp.html"> C# </a> </li>
</ul>
</div>

16
Pythonacademy/webdev/css Dropdown Menu

<!-- End of C Sub Menu -->


</li>
<li class="submenu-python"> Python </li>
<li class="submenu-database"> Database </li>
</ul>
</div>
<!-- End of Programming Sub Menu -->

Output:

When a link is clicked, a new page is loaded. Clicking C++ opens the html file
“pages/programming/c/c++.html”.

17
Pythonacademy/webdev/css Dropdown Menu

3) Styling C sub-menu.

<style>
/* ======== Level 2 Sub Menus ============ */
/* ======================================= */

/* Styling submenu link */


.submenu-link {
text-decoration: none;
color:#ffffff;
background-color: #d1af97;
}

.submenu-link:hover {
background-color: #a78c78;
}

/* Styling Sub Menu C */


.c-submenu {
display:none;
}

.submenu-c:hover .c-submenu {
display: block;
position:absolute;
margin-top: -25px;
margin-left: 85px;
}

.submenu-c:hover .c-submenu ul {
display:block;
width:100px;
}

.submenu-c ul li {
font-size: 1.1rem;
background-color: #d1af97;
}

.submenu-c ul li:hover {
background-color: #a78c78;
}

.submenu-c ul li:hover .submenu-link{


background-color: #a78c78;
}

</style>

18
Pythonacademy/webdev/css Dropdown Menu

Output:

When C# button is clicked, new web page “pages/programming/c/c-sharp.html” is


loaded.

19
Pythonacademy/webdev/css Dropdown Menu

Complete Code
<html>
<head>
<title> My Dropdown Menu </title>
<style>
* {
margin: 0;
padding:0;
color:#000;
background-color: #fcfcfc;
}
html {
font-size: 16px;
}

.menubar {
background-color: #033cff;
}

.menubar ul {
display: inline-flex;
list-style-type: none;
}

.menubar ul li {
background-color: #033cff;
color:#ffffff;
padding:10px;
font-size: 1.5rem;
font-weight: bold;
cursor: default;
}

.menubar ul li:hover {
background-color: #0230cc;
}

/* ======== Level 1 Sub Menus ============ */


/* ======================================= */

/* Styling Sub Menu Programming */


.programming-submenu {
display:none;
}

.mainmenu-programming:hover .programming-submenu {
display: block;
position:absolute;

20
Pythonacademy/webdev/css Dropdown Menu

margin-top: 10px;
margin-left: 15px;
}

.mainmenu-programming:hover .programming-submenu ul {
display:block;
}

.programming-submenu ul li {
font-size: 1.25rem;
}

.programming-submenu ul li:hover {
background-color: #0230cc;
}

/* Styling Sub Menu WebDev */


.webdev-submenu {
display:none;
}

.mainmenu-webdev:hover .webdev-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

.mainmenu-webdev:hover .webdev-submenu ul {
display:block;
}

.webdev-submenu ul li {
font-size: 1.25rem;
}

.webdev-submenu ul li:hover {
background-color: #0230cc;
}

/* Styling Sub Menu Embedded */


.embedded-submenu {
display:none;
}

.mainmenu-embedded:hover .embedded-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;

21
Pythonacademy/webdev/css Dropdown Menu

.mainmenu-embedded:hover .embedded-submenu ul {
display:block;
}

.embedded-submenu ul li {
font-size: 1.25rem;
}

.embedded-submenu ul li:hover {
background-color: #0230cc;
}

/* Styling Sub Menu Advanced */


.advanced-submenu {
display:none;
}

.mainmenu-advanced:hover .advanced-submenu {
display: block;
position:absolute;
margin-top: 10px;
margin-left: 15px;
}

.mainmenu-advanced:hover .advanced-submenu ul {
display:block;
}

.advanced-submenu ul li {
font-size: 1.25rem;
}

.advanced-submenu ul li:hover {
background-color: #0230cc;
}

/* Styling Sub Menu About */


.about-submenu {
display:none;
}

.mainmenu-about:hover .about-submenu {
display: block;
position:absolute;

22
Pythonacademy/webdev/css Dropdown Menu

margin-top: 10px;
margin-left: 15px;
}

.mainmenu-about:hover .about-submenu ul {
display:block;
}

.about-submenu ul li {
font-size: 1.25rem;
}

.about-submenu ul li:hover {
background-color: #0230cc;
}

/* ======== Level 2 Sub Menus ============ */


/* ======================================= */

/* Styling submenu link */


.submenu-link {
text-decoration: none;
color:#ffffff;
background-color: #d1af97;
}

.submenu-link:hover {
background-color: #a78c78;
}

/* Styling Sub Menu C */


.c-submenu {
display:none;
}

.submenu-c:hover .c-submenu {
display: block;
position:absolute;
margin-top: -25px;
margin-left: 85px;
}

.submenu-c:hover .c-submenu ul {
display:block;
width:100px;
}

.submenu-c ul li {
font-size: 1.1rem;
background-color: #d1af97;

23
Pythonacademy/webdev/css Dropdown Menu

.submenu-c ul li:hover {
background-color: #a78c78;
}

.submenu-c ul li:hover .submenu-link{


background-color: #a78c78;
}

/* Styling Sub Menu Python */


.python-submenu {
display:none;
}

.submenu-python:hover .python-submenu {
display: block;
position:absolute;
margin-top: -25px;
margin-left: 85px;
}

.submenu-python:hover .python-submenu ul {
display:block;
width:auto;
}

.submenu-python ul li {
font-size: 1.1rem;
background-color: #d1af97;
}

.submenu-python ul li:hover {
background-color: #a78c78;
}

.submenu-python ul li:hover .submenu-link{


background-color: #a78c78;
}

/* Styling Sub Menu Database */


.database-submenu {
display:none;
}

.submenu-database:hover .database-submenu {
display: block;
position:absolute;
margin-top: -25px;
margin-left: 85px;

24
Pythonacademy/webdev/css Dropdown Menu

.submenu-database:hover .database-submenu ul {
display:block;
width:auto;
}

.submenu-database ul li {
font-size: 1.1rem;
background-color: #d1af97;
}

.submenu-database ul li:hover {
background-color: #a78c78;
}

.submenu-database ul li:hover .submenu-link{


background-color: #a78c78;
}

</style>

</head>
<body>
<div class="menubar">
<ul>
<li class="mainmenu-home"> Home </li>
<li class="mainmenu-programming"> Programming
<!-- Programming Sub Menu -->
<div class="programming-submenu">
<ul>
<li class="submenu-c"> C
<!-- C Sub Menu -->
<div class="c-submenu">
<ul>
<li> <a class="submenu-link"
href="pages/programming/c/c-basic.html"> C Basic </a> </li>
<li> <a class="submenu-link"
href="pages/programming/c/c++.html"> C++ </a> </li>
<li> <a class="submenu-link"
href="pages/programming/c/c-sharp.html"> C# </a> </li>
</ul>
</div>
<!-- End of C Sub Menu -->
</li>
<li class="submenu-python"> Python
<!-- Python Sub Menu -->
<div class="python-submenu">

25
Pythonacademy/webdev/css Dropdown Menu

<ul>
<li class="submenu-python-basic"> Basic Level
</li>
<li class="submenu-python-intermediate">
Intermediate Level </li>
<li class="submenu-python-expert"> Expert
Level </li>
<li class="submenu-python-professional">
Professional Level </li>
</ul>
</div>
<!-- End of Python Sub Menu -->
</li>
<li class="submenu-database"> Database
<!-- Database Sub Menu -->
<div class="database-submenu">
<ul>
<li class="submenu-sqlite3"> SQLite 3 </li>
<li class="submenu-mysql"> MySQL </li>
<li class="submenu-mongodb"> MongoDB </li>
</ul>
</div>
<!-- End of Database Sub Menu -->
</li>
</ul>
</div>
<!-- End of Programming Sub Menu -->
</li>
<li class="mainmenu-webdev"> WebDev
<!-- WebDev Sub Menu -->
<div class="webdev-submenu">
<ul>
<li class="submenu-frontend"> Front End </li>
<li class="submenu-serverside"> Server Side </li>
<li class="submenu-fullstack"> Full Stack </li>
</ul>
</div>
<!-- End of WebDev Sub Menu -->
</li>
<li class="mainmenu-embedded"> Embedded
<!-- Embedded Sub Menu -->
<div class="embedded-submenu">
<ul>
<li class="submenu-arduino"> Arduino </li>
<li class="submenu-micropython"> Micro Python </li>
</ul>
</div>
<!-- End of Embedded Sub Menu -->
</li>

26
Pythonacademy/webdev/css Dropdown Menu

<li class="mainmenu-advanced"> Advanced


<!-- Advanced Sub Menu -->
<div class="advanced-submenu">
<ul>
<li class="submenu-electronics"> Electronics </li>
<li class="submenu-mechatronics"> Mechatronics </li>
<li class="submenu-robotics"> Robotics </li>
<li class="submenu-industrialautomation"> Industrial
Automation </li>
</ul>
</div>
<!-- End of Advanced Sub Menu -->
</li>

<li class="mainmenu-about"> About


<!-- About Sub Menu -->
<div class="about-submenu">
<ul>
<li class="submenu-mission"> Mission </li>
<li class="submenu-vision"> Vision </li>
<li class="submenu-contactus"> Contact Us </li>
</ul>
</div>
<!-- End of About Sub Menu -->
</li>

</ul>
</div>

</body>
</html>

Output:

27

Potrebbero piacerti anche