Jump to content

[HTML & CSS] Dropdown menu


TLG Andrei26
 Share

Recommended Posts

- Aceasta este un cod pentru dropdown menu:

<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#button{
				background-color: #1e519d;
			    color: #ffffff;
			    padding: 15px;
			    border: 0;
			    width:100px;
			    font-weight: bold;
			}

			#dropdown{
				display: inline-block;
			}

			#dropdown:hover #content {
			    display: block;
			}

			#content{
			    display: none;
			    width:100px;
			    background-color: #2f6ac1;
			}

			#content a{
			    color: #FFFFFF;
			    padding: 15px;
			    text-decoration: none;
			    display: block;
			    font-family:Arial;
			    font-size:12px;
			    text-align:center;
			}

			#content a:hover{
				background-color: #28a2bd;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="dropdown">
		  <button id="button">Button</button>
		  <div id="content">
		    <a href="#">Tutorial 1</a>
		    <a href="#">Tutorial 2</a>
		  </div>
		</div>
	</body>
</html>

- In locul acelor "#" puteti pune link-uri catre diferite pagini.

- Butonul creat va arata cam asa:

 

bnpqeo2.png

 

- In momentul cand cursorul este pe buton, se va deschide acest meniu:

 

gXjkU8p.png

 

 

- Pentru orice intrebare/nelamurire ma puteti contacta printr-un PM.

Edited by TLG Andrei26
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.