[CSS][HTML]menu Opcje

[lol99]

witam
jak uzyskać efekt takiego menu jak na tej stronie http://visionesport.com/

[tehaha]

chyba chodzi Ci o css hover

[sadistic_son]

Używając jedynie CSS to zwykłym hover czyli:

[HTML] pobierz, plaintext 
a{
background-image: url('111.jpg');
}
a : hover{
background-image: url('222.jpg');
}
[HTML] pobierz, plaintext 

Ten post edytował sadistic_son 22.06.2010, 16:50:10

[lol99]

załóżmy że wybieramy drużyny to obrazek newsy zmienia sie na normalny a w drużynach na czerwony....

[sadistic_son]

W takim wypadku proponowałbym to zrobić tak:

[PHP] pobierz, plaintext 
$page=$_GET['page'];
 
echo'
<a href="index.php?page=news" style="background-image: url(';
if($page=='news'){echo "'red.jpg'";} else{ echo "'gray.jpg'";}
echo ');
" >NEWS</a>
<a href="index.php?page=druzyny" style="background-image: url(';
if($page=='druzyny'){echo "'red.jpg'";} else{ echo "'gray.jpg'";}
echo ');
" >DRUZYNY</a>
<a href="index.php?page=mecze" style="background-image: url(';
if($page=='mecze'){echo "'red.jpg'";} else{ echo "'gray.jpg'";}
echo ');
" >MECZE</a>
';
[PHP] pobierz, plaintext 

Ten post edytował sadistic_son 22.06.2010, 16:58:27

[lol99]

da sie bez php?

[sadistic_son]

Nie sądzę.

[lol99]

yhm, tylko mi jest to potrzebne do http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
wiec tu chyba php odpada:<

[tehaha]

ten obrazek czerwony przypisz do efektu hover i do klasy np. class="active"

[HTML] pobierz, plaintext 
a{
background:url(green.jpg) no-repeat;
}
a:hover, a.active{
background:url(red.jpg) no-repeat;
}
[HTML] pobierz, plaintext 

i tam gdzie jest strona aktywna to nadajesz linkowi klasę, jeżeli masz prostą stronkę to możesz sobie to ręcznie zrobić bez php


no to tam tylko w css to ustawisz tak jak wyżej napisałem dla efektu hover i dla klasy aktywnej

lepiej użyj sobie jquery tabs i tam łatwo sobie css dopasujesz http://www.stilbuero.de/jquery/tabs_3/

Ten post edytował tehaha 22.06.2010, 17:06:21

[lol99]

powiedz mi jak to mam zastosować do http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

[sebekzosw]

da się zrobić bez PHP - na jquery

[tehaha]

wystarczy że style dopasujesz, poszukaj tam efekt hover dla przycisków i class="selected"

[sebekzosw]

tehaha, myślałem, że chodzi mi, że jak przejdzie na inną podstronę, np.: mecze to będzie na czerwono to co wybrał, i że chce to zrobić bez PHP

[tehaha]

@sebekzosw tu nie chodzi o podstronę tylko o zakładkę bez przeładowania strony do skryptu, który sobie znalazł więc wystarczy tam tylko kilka linijek w stylach zmienić ,

[lol99]

http://animexa.cba.pl/test/
i teraz powiedźcie mi jak zrobić aby np wiadomości były podświetlone(aktywna zakładka wiadomości)

[Lars_18]

Pseudoklasa :active, a jeżeli ma na stałe "trzymać" tą zakładkę to JavaScript.
Linki powinny być utworzone w oparciu o listę wypunktowaną, a nie tak jak ty masz - o divy.

Ten post edytował Lars_18 22.06.2010, 18:24:33

[lol99]

ymh, to klapa bo w js kompletnie nic nie umiem:(

pomoże ktoś?
chce to podpiąć np pod http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

[Lars_18]

W grę tutaj wchodzi już pisanie gotowców, więc napisz na odpowiednim forum lub rozpocznij naukę JavaScript.

[tehaha]

ej ludzie o czym wy w ogóle mówicie nie potrzeba żadnych modyfikacji w js
kolega wybrał sobie taki skrypt: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

i ok, ściągnij sobie te pliki:
http://www.dynamicdrive.com/dynamicindex17...t/tabcontent.js
http://www.dynamicdrive.com/dynamicindex17.../tabcontent.css

i ten kod:

[HTML] pobierz, plaintext 
<h3>Demo #1- Basic implementation</h3>
 
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
 
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
 
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
 
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
 
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
 
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
 
</div>
 
<script type="text/javascript">
 
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
 
</script>
 
<p><a href="java script:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="java script: countries.expandit(3)">Click here to select last tab</a> <a href="java script:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>
 
<hr />
 
 
 
 
 
 
 
 
 
 
 
 
 
<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>
 
<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>
 
<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>
 
<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>
 
 
<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">
 
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
 
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
 
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
 
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
 
</div>
 
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />
 
<script type="text/javascript">
 
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
 
</script>
 
<p><b><a href="java script: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>
 
<hr />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>
 
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>
 
<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
 
<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="java script: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>
 
<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
 
<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
 
<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
 
</div>
 
 
<script type="text/javascript">
 
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
 
</script>
[HTML] pobierz, plaintext 

najłatwiej będzie Ci dopasować DEMO #2, więc wchodzisz do tego pliku css i zmieniasz sobie to:

[HTML] pobierz, plaintext 
.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}
 
.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}
 
[HTML] pobierz, plaintext 

pierwsze to podświetlenie drugie to stan aktywny

i w miarę potrzeb inne klasy z działu /* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */
też sobie do potrzeb dostosuj i tyle
to tylko kilka modyfikacji css nic więcej

[lol99]

niestety gdyby było to wykonalne to bym nie prosił o pomoc..