Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Network Signal Guru

Cum se monteaza obiectul asta?

Curent AC produs de alternator
 GDPR | Algoritm computer vision p...

Elvetia considera interzicerea el...

Windows Defender recuperare

Hackintosh Ryzen 5600g fara placa...
 Cum izolez acest fir?

rtorrent - scripting

TV LG 49UB850V-ZD, musculita in e...

Montare clapeta antiretur la hota
 laptop nou + licenta windows

Unbelievable - De Necrezut -2019 ...

Recomandare achizitie instant ap...

Cand iau pensia pensionarii a car...
 

Meniu activ pe celelalte pagini

- - - - -
  • Please log in to reply
12 replies to this topic

#1
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
As vrea sa stiu si eu o metoda simpla prin care pot face ca dupa ce am dat click pe un link dintr-un oarecare meniu, pe urmatoarea pagina, acel link din meniu sa-i fie adaugat un stil gen: background-color: red; pentru a oferi vizitatorului un simt al orientarii, sa stie pe ce pagina se afla.

Am inteles ca se poate obtine asa ceva cu Javascript, punand o clasa link-ului, dar cum eu nu prea ma pricep cu Javascript... am apelat la voi.

Edited by Alexandrwc, 19 June 2013 - 14:16.


#2
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Am gasit asta http://jsfiddle.net/AcQsc/1/ dar problema este ca acolo merge, iar cand creez eu un nou document si bag toate cele in el si pornesc documentul... nu functioneaza.

<!DOCTYPE html>
<html>

<head>
<title>HTML</title>
<style type="text/css">
.activeLink {
color: red;
}
a{
color: blue;
}
</style>
<script type="text/javascript">
$('.yeahBaby li a').bind('click', function(e) {
$('.activeLink').removeClass('activeLink');
$(this).addClass('activeLink');
return false;
});
</script>
</head>

<body>

<ul class="yeahBaby">
<li><a id="one" class="activeLink" href="#/">Make me default</a></li>
<li><a id="two" href="#/">Example</a></li>
<li><a id="three" href="#/">Example</a></li>
</ul>

</body>

</html>


Exact asa am facut si nu merge, trebuie sa fac ceva la body sa pun onload="si aici ce pun?"...

Edited by Alexandrwc, 19 June 2013 - 15:00.


#3
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010

View PostAlexandrwc, on 19 iunie 2013 - 14:14, said:

As vrea sa stiu si eu o metoda simpla prin care pot face ca dupa ce am dat click pe un link dintr-un oarecare meniu, pe urmatoarea pagina, acel link din meniu sa-i fie adaugat un stil gen: background-color: red; pentru a oferi vizitatorului un simt al orientarii, sa stie pe ce pagina se afla.

Am inteles ca se poate obtine asa ceva cu Javascript, punand o clasa link-ului, dar cum eu nu prea ma pricep cu Javascript... am apelat la voi.
Cu HTML si codul CSS ce-l ai deja, fara Javascript, Javascript este inutil in acest caz.

Numai ca sa vezi cum functioneaza fa trei fisiere cu denumiri diferite si merge, exemple:
Fisierul menu activ.html:
<!DOCTYPE html>
<html>

<head>
<title>HTML</title>
<style type="text/css">
.activeLink {
color: red;
}
a{
color: blue;
}
</style>

</head>

<body>
<h1>meniu activ</h1>

<ul class="yeahBaby">
<li><a id="one" class="activeLink" href="meniu activ.html">Make me default</a></li>
<li><a id="two" href="Example1.html">Example1</a></li>
<li><a id="three" href="Example2.html">Example2</a></li>
</ul>

</body>

</html>

Fisierul Example1.html:
<!DOCTYPE html>
<html>

<head>
<title>Example1</title>
<style type="text/css">
.activeLink {
color: red;
}
a{
color: blue;
}
</style>

</head>

<body>
<h1>Example1</h1>

<ul class="yeahBaby">
<li><a id="one" href="meniu activ.html">Make me default</a></li>
<li><a id="two" class="activeLink" href="Example1.html">Example1</a></li>
<li><a id="three" href="Example2.html">Example2</a></li>
</ul>

</body>

</html>

Fisierul Example2.html:
<!DOCTYPE html>
<html>

<head>
<title>Example2</title>
<style type="text/css">
.activeLink {
color: red;
}
a{
color: blue;
}
</style>

</head>

<body>
<h1>Example2</h1>

<ul class="yeahBaby">
<li><a id="one" href="meniu activ.html">Make me default</a></li>
<li><a id="two" href="Example1.html">Example1</a></li>
<li><a id="three" class="activeLink" href="Example2.html">Example2</a></li>
</ul>

</body>

</html>


Edited by poadol, 19 June 2013 - 17:11.


#4
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Nop, nu ai inteles ce vreau defapt

Vreau sa fie ceva de genul sa zicem ca acum suntem pe prima pagina (Acasa):
[Acasa] | Despre | Servicii | Contact

Iar vizitatorul cand da click pe servicii de ex, pe urmatoarea pagina butonul servicii sa aiba [] si acasa sa nu mai aiba:
Acasa | Despre | [Servicii] | Contact

Am folosit [] ca exemplu, te poti gandi la el ca la background-color diferit.
Solutia ta nu rezolva nimic, nici macar :active... care nu e la ce ma refer.

Multumesc oricum.

Edited by Alexandrwc, 20 June 2013 - 07:21.


#5
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Pai exact ceea ce ai cerut face exemplul prezentat de mine dar daca tu "zici" ca doresti de fapt altceva fie cum "zici".

#6
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Tot fara Javascript. In practica partea css se pune in fisier separat etc., probabil ca stii deja.
Numai ca sa vezi cum functioneaza fa 4 fisiere cu denumirile de mai jos si merge, exemple:
Fisierul Acasa.html:
<!DOCTYPE html>
<html>
<head>
<title>Acasa</title>
<style type="text/css">
.Buby {
margin-top: 20px;
margin-left: 30px;
background: #dedede;
width:270px;
height:25px;
border: 1px solid black;
}
li {
position:relative;
top:-12px;
left:-15px;
padding: 0 3px;
display:inline;
margin-right:5px;
}
.activeLink {
background: yellow;
color: red;
}
a{
color: blue;
}
</style>
</head>
<body>
<h1>Acasa</h1>
<div class="Buby">
<ul class="yeahBaby">
<li><a id="one" class="activeLink" href="Acasa.html">Acasa</a></li>
<li><a id="two" href="Despre.html">Despre</a></li>
<li><a id="three" href="Servicii.html">Servicii</a></li>
<li><a id="three" href="Contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>

Fisierul Despre.html:
<!DOCTYPE html>
<html>
<head>
<title>Despre</title>
<style type="text/css">
.Buby {
margin-top: 20px;
margin-left: 30px;
background: #dedede;
width:270px;
height:25px;
border: 1px solid black;
}
li {
position:relative;
top:-12px;
left:-15px;
padding: 0 3px;
display:inline;
margin-right:5px;
}
.activeLink {
background: yellow;
color: red;
}
a{
color: blue;
}
</style>
</head>
<body>
<h1>Despre</h1>
<div class="Buby">
<ul class="yeahBaby">
<li><a id="one" href="Acasa.html">Acasa</a></li>
<li><a id="two" class="activeLink" href="Despre.html">Despre</a></li>
<li><a id="three" href="Servicii.html">Servicii</a></li>
<li><a id="three" href="Contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>

Fisierul Servicii.html:
<!DOCTYPE html>
<html>
<head>
<title>Servicii</title>
<style type="text/css">
.Buby {
margin-top: 20px;
margin-left: 30px;
background: #dedede;
width:270px;
height:25px;
border: 1px solid black;
}
li {
position:relative;
top:-12px;
left:-15px;
padding: 0 3px;
display:inline;
margin-right:5px;
}
.activeLink {
background: yellow;
color: red;
}
a{
color: blue;
}
</style>
</head>
<body>
<h1>Servicii</h1>
<div class="Buby">
<ul class="yeahBaby">
<li><a id="one" href="Acasa.html">Acasa</a></li>
<li><a id="two" href="Despre.html">Despre</a></li>
<li><a id="three" class="activeLink" href="Servicii.html">Servicii</a></li>
<li><a id="three" href="Contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>

Fisierul Contact.html:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<style type="text/css">
.Buby {
margin-top: 20px;
margin-left: 30px;
background: #dedede;
width:270px;
height:25px;
border: 1px solid black;
}
li {
position:relative;
top:-12px;
left:-15px;
padding: 0 3px;
display:inline;
margin-right:5px;
}
.activeLink {
background: yellow;
color: red;
}
a{
color: blue;
}
</style>
</head>
<body>
<h1>Contact</h1>
<div class="Buby">
<ul class="yeahBaby">
<li><a id="one" href="Acasa.html">Acasa</a></li>
<li><a id="two" href="Despre.html">Despre</a></li>
<li><a id="three" href="Servicii.html">Servicii</a></li>
<li><a id="three" class="activeLink" href="Contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>


Dupa aceea meniul si link-urile le aranjezi = pozitionezi cum doresti.

Edited by poadol, 20 June 2013 - 12:58.


#7
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Hehe, tot nu ai inteles Posted Image ceea ce ai facut tu este ca ai pus manual la fiecare in parte clasa active, dar chestia este ca eu vreau sa dezvolt un CMS si cand creezi pagini noi in php nu poti sa adaugi manual in cod o alta clasa, asa ca trebuie sa faci cu javascript. Sper ca m-ai inteles acum Posted Image

Si da stiu best css practices ( header, fisier extern si inline css :P )

Multumesc mult pentru efort!

Edited by Alexandrwc, 20 June 2013 - 13:42.


#8
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Pai, atunci este evident ca ai gresit sectiunea deoarece Javascript nu face parte din Markup Languages.
Acelasi lucru il poti obtine si din php direct, fara Javascript. Succes!

Uita, ca sa nu te mai obosesti cumva:
http://etutoriale.ro.../2268/1/cu-PHP/

#9
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Multumesc si sorry pentru sectiunea gresita, insa am descoperit cum sa fac asta si cu css simplu, adaug un class lui body sau div-ului container care tine tot site-ul pe fiecare pagina in parte prin cms si prin clasa aia operez si styling-ul la meniu.

http://www.hicksdesi...v/products.html - sursa

Edited by Alexandrwc, 21 June 2013 - 07:33.


#10
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006
Toate variantele oferite tie sunt "bune" si "corecte", doar ca nu iti dai tu seama.
Nu iti dai seama pentru ca esti incepator. Ai cautat pe net solutii si ai dat de una care intamplator se potriveste bine in cazul tau.
Nu inseamna ca celelalte sunt gresite sau mai proaste ci doar ca nu intelegi tu care sunt diferentele dintre ele mai departe de faptul ca una din ele e mai potrivita din punctul tau de vedere pentru situatia ta.

Esti incepator pentru ca ai pus o intrebare cu solutii programatice (server si client side) pe aria de markup.

#11
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Stiu ca sunt toate corecte, dar doar din punctul de vedere al unui site static.
Eu daca vreau sa fac un cms cum ai vrea sa folosesc doar html si css pentru asta?

Si la faza cu incepator, da, sunt incepator in php si javascript, dar de unde ti-ai dat tu seama ca sunt incepator la html si css si ca nu stiu care e diferenta dintre ce mi-a exemplificat mai sus poadol?

Multumesc lui poadol pentru efort si ajutor.

Edited by Alexandrwc, 21 June 2013 - 12:41.


#12
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 4,866
  • Înscris: 24.05.2010
eu folosesc asta

function pagina() {
$pagina = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
return $pagina;
}



si la meniu fac asa

require_once "functii/verificapagina.php";
function divheader()
{
echo '<div id="header" class="clearfix">
	  <div id="selSubHeader" class="clsFloatRight">
		<ul class="clsClearFixSub">
		  <li '.(($pagina=="index.php" || $pagina=="#" || $pagina=="")?'class="clsActive"':' ').' ><a href="#">Acasa</a></li>
		  <li '.(($pagina=="register.php")?'class="clsActive"':' ').' ><a href="#">Inscrie-te</a></li>
		  <li '.(($pagina=="forum.php")?'class="clsActive"':' ').' ><a href="#">Forum</a></li>
		  <li '.(($pagina=="ajutor.php")?'class="clsActive"':' ').' ><a href="#">Ajutor</a></li>
		  <li '.(($pagina=="contact.php")?'class="clsActive"':' ').' ><a href="#">Contact</a></li>
		</ul>
	  </div>
	</div>';
}



#13
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Of of, incepatorul de mine Posted Image)

Pentru cine mai intampina aceasta problema, sfatul este urmatorul:

Facand un site dinamic cu php si mysql, fiecare pagina se va incarca cu un GET diferit in url, gen page_id=1, problema descrisa de mine mai sus poate fi rezolvata astfel:

/* sa zicem ca avem doua variabile, una $pages care contine numele tuturor paginilor din baza de date si o variabila $current_page ce contine un array cu toate datele
paginii respective pe care le luati dinamic din mysql cu ajutorul $_GET['page_id'] */
//Aici sa zicem ca afisam meniul
echo '<ul>';
foreach($pages as $page) {
if($page['name'] == $current_page['name']) { echo '<li class="active">'.$page['name'].'</li>'; }
else { echo '<li>'.$page['name'].'</li>'; }
}
echo '</ul>';
//Clasa active face nustiu ce highlight vreti voi din CSS...
PS: Va recomand sa invatati Smarty pentru a separa codul php de cel html si pentru a scapa de acele echo-uri.


Edited by Alexandrwc, 25 September 2014 - 13:47.


Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate