Elxis CMS Forum

Ελληνικό Forum => Γενικά Θέματα για το Elxis CMS => Topic started by: ioannis on December 20, 2009, 21:26:16

Title: Topmenu
Post by: ioannis on December 20, 2009, 21:26:16

Καλησπέρα,

υπάρχει η δυνατότητα στο topmenu για απεικόνιση το όνομα κάποιας καταχώρησης (π.χ. επικοινωνία) να αντικατασταθεί με κάποια εικόνα η οποία μάλιστα ωα αλλάζει όταν ο δείκτης του maus θα πηγαίνει επάνω σε αυτή? Είναι αυτό εφικτό μέσω του css ή χρειάζεται java?

Title: Re: Topmenu
Post by: ks-net on December 20, 2009, 22:21:23

https://forum.elxis.org/index.php?topic=3770.0

Title: Re: Topmenu
Post by: ioannis on December 21, 2009, 01:00:26

το " onmausover" πως θα δουλέψει? Αυτό που προσπαθώ να κάνω είναι να αλλάζει η εικόνα μόλις ο δείκτης του ποντικιού πάει επάνω...

Title: Re: Topmenu
Post by: CREATIVE Options on December 21, 2009, 10:35:13

το onmouseover που ψάχνεις στον κώδικα CSS θα το βρεις / γράψεις σαν hover

Title: Re: Topmenu
Post by: ioannis on December 21, 2009, 21:34:30

το πρόβλημά μου όμως είναι ότι για κάθε καταχώρηση μενού θέλω να εμφανίζεται μια ξεχωριστή εικόνα (αυτό γίνεται εύκολα μέσω της διαχείρισης της κάθε καταχόρησης) αλλα δυσκολεύομαι στο πως θα αλλάζει η εικόνα για την κάθε καταχώρηση μενού...

μήπως πρέπει να φτιάξω για κάθε καταχώρηση μια κλάση (...hover) την οποία θα καταχωρήσω στην διαχείρηση των μενού?

Title: Re: Topmenu
Post by: datahell on December 21, 2009, 23:03:07

Είτε το κάνεις με css, είτε με javascript, θα πρέπει να βάλεις κάτι στο κάθε αντικείμενο μενού ώστε να γίνουν διακριτά. Δηλαδή θα πρέπει να φτιάξεις ένα custom μενού.

Με JavaScript τα αντικείμενα του μενού σου θα πρέπει να είσαι κάπως έτσι:

Code: [Select]

<script type="text/javascript">
/* <![CDATA[ */
function myswitchimage(imgid, on) {
    if (document.getElementById('mymenulink'+imgid)) {
        var imgObj = document.getElementById('mymenulink'+imgid);
        if (on == 1) {
        var newimg = 'image'+imgid+'_on.jpg';
        } else {
        var newimg = 'image'+imgid+'_off.jpg';
        }
        imgObj.src = document.getElementById('mymenu_livesite').innerHTML+'/images/myimages/'+newimg;
   }
}
/* ]]> */
</script>

<ul class="mymenu">
<li>
<a href="#" title="link to page 1">
<img src="image1_off.jpg" id="mymenulink1" alt="menu 1" border="0" onmouseover="myswitchimage(1,1);" onmouseout="myswitchimage(1,0);" />
</a>
</li>
<li>
<a href="#" title="link to page 2">
<img src="image2_off.jpg" id="mymenulink2" alt="menu 2" border="0" onmouseover="myswitchimage(2,1);" onmouseout="myswitchimage(2,0);" />
</a>
</li>
.....
</ul>
<div id="mymenu_livesite" style="margin: 0; padding: 0; display: none;"><?php echo $mainframe->getCfg(&#39;live_site&#39;); ?></div>

Τον κώδικα τον έγραψα τώρα. Δεν το δοκίμασα αλλά πρέπει να είναι εντάξει.

Title: Re: Topmenu
Post by: ioannis on December 21, 2009, 23:46:44

Δηλαδή εννοείς για το κάθε αντικείμενο μια ξεχωριστή κλάση στο css όπου θα προσδιορίζονται και οι δυο εικόνες (κανονική και hover) ή τον κώδικα java script παραπάνω για κάθε αντικείμενο ξεχωριστά?

Title: Re: Topmenu
Post by: datahell on December 22, 2009, 08:37:57

Από ότι βλέπεις στην συγκεκριμένη μέθοδο που σου έγραψα χρησιμοποίησα javascript και όχι css. Η μέθοδος λειτουργίας είναι η εξής:
Όταν το ποντίκι πάει πάνω από την εικόνα του μενού τρέχει η συνάρτηση myswitchimage η οποία αλλάζει το source της εικόνας. Αυτή η συνάρτηση παίρνει 2 εισόδους:
- η πρώτη είναι ο αύξων αριθμός του αντικειμένου μενού
- η δεύτερη δηλώνει αν θα πρέπει να δείξω την αρχική (0) ή την "mouse over" εικόνα (1).

Το mymenu_livesite το έχω βάλει για να διαβάζω την πλήρη URL του Elxis μέσα στη javascript ώστε οι εικόνες να φορτώνονται με την πλήρη URL και όχι με σχετικές URLs.

Για κάθε αντικείμενο μενού φτιάχνεις 2 εικόνες: image1_off.jpg, image1_on.jpg (για το πρώτο αντικείμενο), image2_off.jpg, image2_on.jpg (για το δεύτερο αντικείμενο), image3_off.jpg, image3_on.jpg (για το τρίτο αντικείμενο), ... κλπ, και τις βάζεις στο φάκελο images/myimages/

Εννοείται ότι μπορείς να αλλάξεις τις ονομασίες και τις διαδρομές απλά ενημέρωσε τον κώδικα αν το κάνεις.

Title: Re: Topmenu
Post by: ioannis on December 22, 2009, 20:36:54

Εννοεις δηλ. datahell οτι θα πρέπει στην διαχείριση μενού να δημιουργήσω ένα άλλο μενου π.χ. top1 και για κάθε αντικείμενο ξεχωριστά να προσθέσω τον κώδικά που έγραψες παραπάνω?

Title: Re: Topmenu
Post by: datahell on December 22, 2009, 21:51:20

Εφόσον το μενού είναι custom δεν υπάρχει, άρα πρέπει να το φτιάξεις. Ένα μενού είναι ουσιαστικά ένα module. Άρα πρέπει να φτιάξεις ένα module. Ένα Module αποτελείται από δύο αρχεία, ένα php και ένα xml. Τα περιεχόμενα του XML είναι τυποποιημένα. Τα περιεχόμενα του php στα έγραψα εδώ, ουσιαστικά είναι html κώδικας. Δες την τεκμηρίωση για κατασκευή modules στο wiki του elxis ( http://wiki.elxis.org (http://wiki.elxis.org) ).

Title: Re: Topmenu
Post by: ioannis on December 23, 2009, 02:25:13

Στην ουσία το topmenu είναι αυτό που θέλω να χρησιμοποιήσω. Αυτό υπάρχει ήδη ή θα υπάρχει πρόβλημα αν χρησιμοποιήσω αυτό?

Title: Re: Topmenu
Post by: ks-net on December 23, 2009, 03:13:09

Εναλλακτική...

αν θες να αλλάξει το  background μόνο κάνει το top-menu...

αλλά αν θές να κάνεις αυτό που περιγράφεις στο πρώτο σου πόστ...

θα κάνεις unpublished το module top menu(δεν θα το διαγράψεις) για να αδειάσει ή θέση...

και στο σημειο που εμφανίζεται το top-menu μέσα στον κώδικα στο index.php του template σου --σε πάω κατευθείαν στο κώδικα του index για να μην σε μπερδέψω με custom modules ktl.--

και θα γράψεις με το χέρι τον κώδικα έτσι όπως βολεύει ένα javascript ή ένα css

παράδειγμα:

Code: (όπως τυπώνεται από το elxis) [Select]

<div id="top_menu">
<div class="moduletable">
<ul id="mainlevel-nav810" class="mainlevel-nav">
<li><a href="http://www.elxis-demo.com/el/" title="Αρχική" class="mainlevel-nav">Αρχική</a></li>
<li><a href="http://www.elxis-demo.com/el/links/" title="Συνδέσεις" class="mainlevel-nav">Συνδέσεις</a></li>
<li><a href="http://www.elxis-demo.com/el/contact/site-contacts/sernayme-nickolas.html" title="Επικοινωνία" class="mainlevel-nav">Επικοινωνία</a></li>
</ul>
</div>

</div>
θα μπορούσε να γίνει έτσι για να βολεύει ένα css έτσι ώστε να κάνει τη δουλειά που θές..

Code: (τροποποιημένο-κρατήσαμε μόνο τα λινκ) [Select]

<div id="top_menu">

<a id="button1"  href="http://www.elxis-demo.com/el/" title="Αρχική"><span>Αρχική</span></a>
<a id="button2"  href="http://www.elxis-demo.com/el/links/" title="Συνδέσεις"><span>Συνδέσεις</span></a>
<a id="button3"  href="http://www.elxis-demo.com/el/contact/site-contacts/sernayme-nickolas.html" title="Επικοινωνία"><span>Επικοινωνία</span></a>

</div>
και τo css του:

Code: [Select]

#button1
{
  display: block;
 float:left;/*ανάλογα*/
  width: 107px;
  height: 23px;
  background: url("button1") no-repeat 0 0;

}

#button1:hover
{
  background: url("button1-over") no-repeat 0 0;
}

#button1 span
{
  display: none;
}

κ.τ.λ... για τα άλλα buttons

για να φορτώνει γρήγορα το hover-image.. καλά είναι το μονό image  με αλλαγή του background-position  για τα 2 states normal-hover
δες => http://www.elated.com/articles/css-rollover-buttons/  έχω χρησιμοποιήσει-εφαρμόσει των κώδικα του, εκεί υπάρχει και αυτό που λέμε για τo μονό image.

Title: Re: Topmenu
Post by: ioannis on December 25, 2009, 00:59:31

τελικά χρησιμοποίησα την μέθοδο του ks-net και δουλεύει οκ.
το javascript θα ήθελα να το δοκιμάσω αλλά κολάω στο ότι δεν γνωρίζω που πρέπει να το κολλήσω. Σαν ξεχωριστό JS ή μέσα στο index.php?

ευχαριστώ

Καλά χριστούγεννα σε όλους, Χρόνια πολλά.