Butoane meniu

#1
colombo2003

Posted 18 October 2016 - 22:20

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

As dori sa realizez un meniu orizontal (simplu, fara suboptiuni; cel putin nu in acest moment), in care butoanele sa fie trapezoidale, ca in figura.

In css am reusit sa fac asta (pentru forma), numai ca nu reusesc sa si scriu ceva (ca text) centrat atat vertical cat si orizontal in acel buton.

Stiu ca pentru a face un mneiu, recomandat e sa fie facut cu <ul> si <li>; dar ma gandeam sa pun <div>-uri, unul dupa altul.
Am incercat sa le las si ca atare, dar si toate intr-un alt div (parinte).

De exemplu cand scriu Prima pagina, aceasta, orice i-as face, coboara sub trapez (ori eu il vreau centrat pe trapez).
Am incercat sa il pun si in afara div-ului, si dupa, si cu <br> (sau mai multe) sau fara.
Textul am incercat sa il las fie simplu, fie in <span> sau in <p>, dar nimic nu merge. Nu vrea sa stea in interior.

Ma gandeam si la varianta sa fac poza acel buton (dar nu am incercat-o inca). Oare e mai indicat?

Ce nu fac bine? Pe cei care au experienta, ii rog sa-mi dea un sfat.

Multumesc

css:

.trapezoid {
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 40px solid blue;
	display: block;
	float: left;
	height: 0;
	width: 100px;
}

html:

...
...
<body>
<div class="trapezoid"></div>
<div class="trapezoid"></div>
<div class="trapezoid"></div>
...
...
...

Attached Files

model.jpg 9.99K 8 downloads

Back to top

#2
tigerheart

Posted 18 October 2016 - 23:02

Savage Member

Grup: Senior Members
Posts: 9,893
Înscris: 07.08.2008

Uite un exemplu facut pe fuga: https://jsfiddle.net/c96ttb0m/2/
Cu siguranta se poate face si intr-un mod mai "frumos". Sper sa te ajute ca sa iti faci o idee Posted Image

Edited by tigerheart, 18 October 2016 - 23:04.

Back to top

#3
colombo2003

Posted 19 October 2016 - 00:27

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Da, simplu, scurt si la obiect! Este exact ce doream! Multumesc!

Acum insa am alta problema: la hover! Pentru ca atat div-ul, cat si textul, au forma dreptunghiulara.
Vreau sa se shimbe si culoarea butonului, dar si a textului (si sa fie ingrosat). Si, cand sunt cu mouse-ul in triunghiul dintre cele doua butoane (deci cumva in afara butonului), el se "aprinde" totusi. Si nu e ok.
Si nici textul nu-si schimba culoarea (si devine ingrosat) decat tarziu, si in fct de pozitia mouseului.

Vreo solutie?

Back to top

#4
tigerheart

Posted 19 October 2016 - 00:52

Savage Member

Grup: Senior Members
Posts: 9,893
Înscris: 07.08.2008

Uite aici si cu hover, dar se activeaza si in spatiul transparent al butoanelor: http://jsfiddle.net/c96ttb0m/3/

Edited by tigerheart, 19 October 2016 - 00:53.

Back to top

#5
colombo2003

Posted 23 October 2016 - 14:37

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Maestre, multumesc! Functioneaza perfect! Si mult mai simplu (in cele din urma am reusit si eu ceva, dar mult mai complicat si grosolan...).

O ultima intrebare: se poate face ceva, cumva ca intreaga bara de meniu sa fie centrata pe spatial ecranului?

Eu ma gandeam sa bag toata chestia intr-un div si apoi sa dau margin: 0 auto. Dar se vede treaba ca nu e suficient sau ceva nu e la locul potrivit.
Vreo idee? Merci.

Back to top

#6
tigerheart

Posted 23 October 2016 - 15:24

Savage Member

Grup: Senior Members
Posts: 9,893
Înscris: 07.08.2008

http://jsfiddle.net/c96ttb0m/7/

Folosind cod de aici: https://css-tricks.c...complete-guide/

Back to top

#7
colombo2003

Posted 23 October 2016 - 16:15

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Wow! Impresionant! Simplu si functioneaza foarte bine.
Maestre, multumesc pentru rabdare si ajutor.

PS. Rezolvat. Se poate inchide!

Back to top

#8
tigerheart

Posted 23 October 2016 - 16:26

Savage Member

Grup: Senior Members
Posts: 9,893
Înscris: 07.08.2008

Cu placere!

Back to top

Anunturi

Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

Butoane meniu

#1 colombo2003 Posted 18 October 2016 - 22:20

Attached Files

#2 tigerheart Posted 18 October 2016 - 23:02

#3 colombo2003 Posted 19 October 2016 - 00:27

#4 tigerheart Posted 19 October 2016 - 00:52

#5 colombo2003 Posted 23 October 2016 - 14:37

#6 tigerheart Posted 23 October 2016 - 15:24

#7 colombo2003 Posted 23 October 2016 - 16:15

#8 tigerheart Posted 23 October 2016 - 16:26

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 18 October 2016 - 22:20

#2
tigerheart

Posted 18 October 2016 - 23:02

#3
colombo2003

Posted 19 October 2016 - 00:27

#4
tigerheart

Posted 19 October 2016 - 00:52

#5
colombo2003

Posted 23 October 2016 - 14:37

#6
tigerheart

Posted 23 October 2016 - 15:24

#7
colombo2003

Posted 23 October 2016 - 16:15

#8
tigerheart

Posted 23 October 2016 - 16:26