Google+

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[CSS]Meniu CSS orizontal simplu
#1
HTML COD:

Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 <head>
 <title>Meniu CSS simplu</title>
 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 </head>
 <body>
 <ul id="meniu">
 <li><a href="#" class="primul-element">Element 1</a></li>
 <li><a href="#">Element 2</a></li>
 <li><a href="#">Element 3</a></li>
 <li><a href="#">Element 4</a></li>
 </ul>
 </body>
 </html>


COD CSS (style.css):

Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* stil pentru lista ordonata */

 #meniu{
 list-style:none;
 /* scoate stilul bullet de la lista */
 overflow:hidden;
 /* folosit pt. ca background-ul elementului container sa nu se suprapuna cu elemente cu propietatea float */
 width:100%;
 /* tinand cont de propietatea de mai sus trebuie sa folosim o latime de 100% pt. IExplorer */
 margin:0;
 /* tot pentru IExplorer trebuie specificata si marginea de 0 px */
 padding:1px;
 /* spatiu de 1px intre limita listei si continutul acesteia */
 background-color:#FFFFFF;
 /* culoarea de background a meniului */
 border:1px solid #222222;
 /* definim latimea si culoarea pentru border la meniu */
 }

 /* stil pentru elementele listei */

 #meniu li{
 display:inline;
 /* pentru afisarea corecta pe orizontala in IExplorer */
 }

 /* stil pentru link-uri */

 #meniu a{
 display:block;
 /* modificam link-ul din element inline in element de tip bloc */
 float:left;
 /* aliniaza link-urile pe orizontala */
 width:70px;
 /* latimea pentru un element al meniului (link) */
 height:25px;
 /* inaltimea pentru un element al meniului (link) */
 margin-left:1px;
 /* maringe stanga */
 padding-left:15px;
 /* spatiu intre margine si textul din element */
 background-color:#e9e9e9;
 /* culoare de background pentru elemente (linkuri) */
 border-left:10px solid #444444;
 /* latime si culoare pentru border-ul din stanga */
 font-family:arial;
 font-size:10px;
 text-transform:uppercase;
 text-decoration:none;
 color:#444444;
 /* stilul pentru font (family, size, transform, decoration, color) */
 line-height:25px;
 /* alinierea pe verticala a textului (valoarea este egala cu latimea linkului) */

 }

 /* stil pentru link-uri in starea hover */

 #meniu a:hover{
 background-color:#E5E5E5;
 /* se schimba culoarea de background */
 border-left:10px solid #666666;
 /* se schimba culoarea pentru border stanga */
 color:#666666;
 /* se schimba culoarea textului */
 }

 /* stil pentru link-ul din primul element */

 #meniu a.primul-element{
 margin-left:0;
 background-color:#E5E5E5;
 /* se schimba culoarea de background */
 border-left:10px solid #666666;
 /* se schimba culoarea pentru border stanga */
 color:#666666;
 /* se schimba culoarea textului */
 }

Reply
#2
dragut, interesant dar as avea o sugestie:
De ce folositi css din exterior? Call rel style css source ingreuneaza pagina.
Din punct de vedere al optimizarii nu e chiar ok...
App...poate ai timp si faci un update folosind CSS3 .
Astept update.
Succes!
Reply
#3
Sa inteleg a este vorba de un menu pe verticala?
Pentru a mentine un forum unitar si pentru a utiliza informatia intr-un numar cat mai mic de subiecte, va rugam ca inainte de a deschide o Discutie Noua sa folositi functia Cautare (Search) !
Cititi periodic
Regulamentul
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)