динамично меню

S

SandPrince

Registered
Здравейте ! Трябва ми вертикално меню като това на картинката- подобно:

216669_orig.jpg


само че бутоните трябва да са маалко по тъмни от бяло и отдолу на всеки бутон да има такова поддчертаване . И сега обясненията:

Когато бутона не е посочен трябва подчертаното да е черно а когато се посочи да става във следните цветове (различни цветове за всеки бутон)

Начало - Син
Трикове - Виолетов
Файлове - Зелен
Галерия - Червен
Форум - Оранжев
Линкове - Маслинов

Веднъж бях видял такова меню в един сайт - ама вертикално - но не знам как да го направя. а и сайта не го помня.... иначе щях да видя кода от там
---------------------------
П.С. картинката е само примерна не се водете по същите цветове а по тези които съм дал.
 
ами правиш едно просто вертикално меню със стилове и на всяко меню слагаш отделен стил с разлияен цвят на фона
 
mitko876 каза:
ами правиш едно просто вертикално меню със стилове и на всяко меню слагаш отделен стил с разлияен цвят на фона
Увеличете...

е да ама подчертаването.......
 
DJCharge каза:
Ми с border-bottom няма ли да стане :)

Edit: само с CSS може да се направи и ще стане мн. добре! :?:
Увеличете...

еми с CSS де , ама може ли някой да ми напише кода че нямам прдстава как става
 
Нещо такова?

Код: 
<style type="text/css">
 td.st0 { 
  border: 1px solid #F1F1F1; background: #FAFAFA;
  padding: 3px;
 }
 a.st1 { 
  font-family: verdana; font-size: 11px; color: #ED3E3E; 
  text-decoration: none; padding-bottom: 2px;
  display: block; border-bottom: 6px solid #5f5f5f; 
 } 
 a.st1:hover { border-bottom: 6px solid #F0ADD0; } 
 a.st2 { 
  font-family: verdana; font-size: 11px; color: #ED3E3E; 
  text-decoration: none; padding-bottom: 2px;
  display: block; border-bottom: 6px solid #5f5f5f; 
 } 
 a.st2:hover { border-bottom: 6px solid #A85FFD; }
</style> 

<table width="120"> 
 <tr> 
  <td align="center" class="st0"> 
  <a href="#" class="st1"><b>ПРОБА 1</b></a> 
  </td> 
 </tr> 
 <tr> 
  <td align="center" class="st0"> 
  <a href="#" class="st2"><b>ПРОБА 2</b></a> 
  </td> 
 </tr> 
</table>

Това е един груб пример :D
 
Това няма ли да е най-добре със списъци да се направи? Един неномериран и вътре list-item-ите? Най-малко код ще е, само дето hover-а под IE май няма да се вижда. :?
 
DJCharge каза:
Нещо такова?

Код: 
<style type="text/css">
 td.st0 { 
  border: 1px solid #F1F1F1; background: #FAFAFA;
  padding: 3px;
 }

 a.st1 { 
  font-family: verdana; font-size: 11px; color: #ED3E3E; 
  text-decoration: none; padding-bottom: 2px;
  display: block; border-bottom: 6px solid #5f5f5f; 
 } 
 a.st1:hover { border-bottom: 6px solid #F0ADD0; } 

 a.st2 { 
  font-family: verdana; font-size: 11px; color: #ED3E3E; 
  text-decoration: none; padding-bottom: 2px;
  display: block; border-bottom: 6px solid #5f5f5f; 
 } 
 a.st2:hover { border-bottom: 6px solid #A85FFD; }
</style> 

<table width="120"> 
 <tr> 
  <td align="center" class="st0"> 
  <a href="#" class="st1"><b>ПРОБА 1</b></a> 
  </td> 
 </tr> 
 <tr> 
  <td align="center" class="st0"> 
  <a href="#" class="st2"><b>ПРОБА 2</b></a> 
  </td> 
 </tr> 
</table>

Това е един груб пример :D
Увеличете...

Благодаря за кода! можеш ли да ми го направиш за цялото меню с точните цветове които съм посочил - е сега ако е една идея по тъмно или по светло няма значение- че не мога да схвана кое да променям. Ако можеш направи го цялото меню.
 
Копираш:

a.st2 {
font-family: verdana; font-size: 11px; color: #ED3E3E;
text-decoration: none; padding-bottom: 2px;
display: block; border-bottom: 6px solid #5f5f5f;
}
a.st2:hover { border-bottom: 6px solid #A85FFD; }

... и променяш #цвета и st2 на st3 ... ако разгледаш кода по-внимателно ще видиш кое-как-що е :?:

След това добавяш:

<tr>
<td align="center" class="st0">
<a href="#" class="st3"><b>ПРОБА 3</b></a>
</td>
</tr>

Надявам се разбра как ще стане и по-нататък :?:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе