Οριζόντιο Μενού - διαφορετικό χρώμα στην ενεργή σελίδα

[ge0rgeL1986]

Γειά χαρά σε όλους!

 

έχω το οριζόντιο μενού που φαίνεται στην εικόνα

 

 

το μενού είναι σε html και παίρνει τη μορφή απο ένα αρχείο css ( τουλάχιστον αυτό καταλαβαίνω )

 

είναι δυνατό όταν βρίσκεσαι στη σελίδα Υπηρεσίες για παράδειγμα, το χρώμα του "Υπηρεσίες" αντί για πορτοκαλί να είναι πχ γκρι;

όταν στη συνέχεια πηγαίνεις στην αρχική το χρώμα της αρχικής να είναι γκρί και το "Υπηρεσίες" να είναι ξανά πορτοκαλί?

 

με λίγα λόγια διαφορετικό χρώμα για την active επιλογή. γίνεται κάπως αυτο;

 

Ευχαριστώ εκ των προτέρων

[parsifal]

Ναι, φυσικά μπορεί να γίνει.

 

Ένας τρόπος που μου έρχεται τώρα π.χ. είναι σε κάθε διαφορετική σελίδα να «μαρκάρεις» το αντίστοιχο element με μία συγκεκριμένη κλάση. Για παράδειγμα, το faq.html (αν υποθέσουμε ότι αυτό αντιστοιχεί στο menuitem «Συχνές Ερωτήσεις») θα είναι κάπως έτσι:

>
   <ul id="menu">
       <li><a href="">Αρχική</a></li>
       <li><a href="">Η εταιρεία</a></li>
       <li><a href="">Υπηρεσίες</a></li>
       <li class="active"><a href="">Συχνές Ερωτήσεις</a></li>
   </ul>

 

και στον CSS κώδικα να ορίζεις το έξτρα styling που θες για το element αυτό:

>
.active {
   ...
}

[Themis-T]

και στον CSS κώδικα να ορίζεις το έξτρα styling που θες για το element αυτό:

>css:
#menu li a {
background:#11bbff;
color:#000000;
}

#menu li.active a{
background:#ACC4D0;
color:#000000;
}

[parsifal]

>css:
#menu li a {
background:#11bbff;
color:#000000;
}

#menu li.active a{
background:#ACC4D0;
color:#000000;
}

 

Κοντρίτσα για πιο γρήγορη CSS, γουστάρω! Αυτό είναι ακόμη πιο γρήγορο:

 

>
   <ul id="menu">
       <li><a href="">Αρχική</a></li>
       <li><a href="">Η εταιρεία</a></li>
       <li><a href="">Υπηρεσίες</a></li>
       <li id="activePageMenu"><a href="" id="activePageLink>Συχνές Ερωτήσεις</a></li>
   </ul>

 

>
#activePageMenu {
   ...
}

#activePageLink {
   ...
}

[ge0rgeL1986]

ουάου με κατασκλαβώνετε σας ευχαριστώ πολύ

 

είχα κάνει κάτι τέτοιο (κώδικας παρακάτω) ακολουθώντας τα tutorial από το w3school αλλά αυτό που κάνει το active είναι την ώρα που το πατάω να γίνεται μαύρο και μόλις φορτώσει τη σελίδα γίνεται κανονικά πορτοκαλί όπως είναι δηλωμένο στο a:link... θέλω να συνεχίσει να είναι μαύρο υποδεικνύοντας τη φορτωμένη σελίδα. βλέπετε κανένα λάθος;

(πρόκειτε για joomla css file)

 

>ul#mainlevel-nav li a:link
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color:#F98123;
background: transparent;
}


ul#mainlevel-nav li a:visited
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color:#F98123;
background: transparent;
}


ul#mainlevel-nav li a:hover
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color:#666666;
background: transparent;
}

ul#mainlevel-nav li a:active 
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color:#000000;
background: transparent;
}

[Themis-T]

Δοκίμασε να αλλάξεις το:

>ul#mainlevel-nav li a:active

σε

>ul#mainlevel-nav li a#active_menu-nav

και πες μας εάν δουλεύει.

[parsifal]

Δοκίμασε να αλλάξεις το:

>ul#mainlevel-nav li a:active

σε

>ul#mainlevel-nav li a#active_menu-nav

και πες μας εάν δουλεύει.

Δεν έχω ασχοληθεί με τα ενδότερα του Joomla, αλλά μήπως το active_menu-nav ID εφαρμόζεται αυτόματα στο «τρέχον» li element και όχι απευθείας στο a που περιέχει; Μου φαίνεται πιο λογικό και αν είναι όντως έτσι, ο selector θα πρέπει να έχει τη μορφή:

 

>
ul#mainlevel-nav li#active_menu-nav a

[ge0rgeL1986]

τελικά δούλεψε αυτό!

>ul#mainlevel-nav li a#active_menu-nav

Σ ευχασριστώ πολύ!!! you saved my day

 

 

 

αν και οι γνώσεις μου περιορίζονται στην ανάγνωση, αν έχεις χρόνο και διάθεση μπορείς να εξηγήσεις γιατί

αυτό

>ul#mainlevel-nav li a:active 

λειτουργεί έτσι οπως λειτουργεί και

αυτό

>ul#mainlevel-nav li a#active_menu-nav

 

κάνει τη δουλειά που υπονοεί το active;;

 

και πάλι σ ευχαριστώ!

[Themis-T]

Λογικά και το

>ul#mainlevel-nav li a:active

αλλά και το

>ul#mainlevel-nav li a#active_menu-nav 

είναι σωστά. Μην ξεχνάς ότι το Joomla είναι λίγο περίεργο...

[parsifal]

Η ψευδοκλάση :active λειτουργεί έτσι όπως λειτουργεί, γιατί για τα <a> elements το active state εξ ορισμού είναι η κατάσταση στην οποία βρίσκεται το link όταν κάνεις κλικ επάνω του και μόνο για όσο χρονικό διάστημα διαρκεί το κλικ. Το διάστημα αυτό είναι συνήθως πολύ μικρό, γιατί απελευθερώνουμε γρήγορα το κουμπί του ποντικιού, οπότε και το link επιστρέφει στο προηγούμενο state. Τίποτα περισσότερο, τίποτα λιγότερο και καμία αναφορά σε δομές menu, unordered lists, list items κλπ.

 

Όπως καταλαβαίνεις, αυτό δεν έχει και τόσο άμεση σχέση με αυτό που ήθελες να επιτύχεις (δηλαδή μεταξύ διαφορετικών σελίδων επιλέξιμων από ένα μενού, να κρατιέται κάπου η πληροφορία για το ποια είναι η «τρέχουσα»). Απλά, η χρήση του "active" ως λέξη ήταν που σε αποπροσανατόλισε. Και το πρόβλημα φαίνεται πως το Joomla (ή κάποιο module του συγκεκριμένα που χρησιμοποιείς) στο λύνει ήδη εν μέρει, προσθέτοντας ένα id στο εκάστοτε «τρέχον» menu item/menu link. Οπότε, θα δουλέψεις βάσει αυτού και όχι βάσει των ψευδοκλάσεων των <a> elements.

[ge0rgeL1986]

κατάλαβα σας ευχαριστώ και τους δύο!