• Home
Thursday, April 15, 2021
  • Login
Tutoriale Video IT Programare Website - Websitexxl.ro
  • Home
No Result
View All Result
  • Home
No Result
View All Result
Tutoriale Video IT Programare Website - Websitexxl.ro
No Result
View All Result
Home Tutoriale Grafica

Crearea unui meniu vertical intr-un stil nou

Admin by Admin
July 31, 2018
in Tutoriale Grafica
1

In acest tutorial va voi prezenta crearea un nou concept de meniu vretical. Acesta poate fi integrat in templantele HTML cat si pe site-urile create pe platforme CMS precum WordPress. Este ideal in special pentru site-urile create pentru jocuri.

 

 

 

 

 

 

 

Cod HTML

[alert status=”info”]

<ul class=”menu cf”>
<li><a href=””>Home</a></li>
<li>
<a href=””>Meniu 1</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
<li>
<a href=””>Meniu 2</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
<li>
<a href=””>Meniu 3</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
<li>
<a href=””>Meniu 4</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
<li>
<a href=””>Meniu 5</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
<li>
<a href=””>Meniu 6</a>
<ul class=”submenu”>
<li><a href=””>Submeniu 1</a></li>
<li><a href=””>Submeniu 2</a></li>
<li><a href=””>Submeniu 3</a></li>
<li><a href=””>Submeniu 4</a></li>
<li><a href=””>Submeniu 5</a></li>
<li><a href=””>Submeniu 6</a></li>
</ul>
</li>
</ul>

[/alert]

Toale cuvintele si cifrele scrise cu rosu pot fi modificate fara sa afecteze codul HTML pentru obtinerea unui meniu in functie de preferintele dvs.

 

Cod CSS

[alert status=”info”]

.cf:before,
.cf:after {
content: ” “;
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.menu,
.submenu {
margin: 0;
padding: 0;
list-style: none;
}

/* Main level */
.menu {
margin: 50px auto;
width: 800px;
width: fit-content;
}

.menu > li {
background: #34495e;
float: left;
position: relative;
transform: skewX(25deg);
}

.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}

.menu li:hover {
background: #e74c3c;
}

.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}

.submenu li {
background-color: #34495e;
position: relative;
overflow: hidden;
}

.submenu > li > a {
padding: 1em 2em;
}

.submenu > li::after {
content: ”;
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}

/* Odd stuff */
.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}

/* Even stuff */
.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}

.submenu li {
transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}

.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}

[/alert]

 

Vezi Demo

ShareTweetPin
Previous Post

Crearea unui tabel pentru stabilirea preturilor (Pricing Table)

Next Post

Update oficial Allview P6 Life, Android 5.1 Lollipop

Admin

Admin

Related Posts

Tutoriale Grafica

Crearea unui tabel pentru stabilirea preturilor (Pricing Table)

by Admin
December 18, 2014
Tutoriale Grafica

Poti castiga bani pe internet ca fotograf profesionist?

by Admin
May 22, 2014
Tutoriale Grafica

Programe fara de care viata ar fi mult mai dificila

by Admin
May 23, 2014
Tutoriale Grafica

Program pentru a crea un site web

by Admin
November 29, 2013
Load More
Next Post

Update oficial Allview P6 Life, Android 5.1 Lollipop

Cum se pot rula aplicatii si jocuri Android pe PC

Tutorial update Android 5.1 – Allview P6 Life - SP Flash Tool

Comments 1

  1. ionut says:
    4 years ago

    Bravo frate, meniul asta imi place tare mult. M-ai ajutat enorm. Big thx!!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result
Tutoriale Video IT Programare Website - Websitexxl.ro

© 2021 Websitexxl.ro

Navigate Site

  • #6802 (no title)
  • Politică de confidențialitate
  • Politică de cookie

Follow Us

No Result
View All Result
  • Home

© 2021 Websitexxl.ro

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In