Fixed menu (floating)

Joomla! Extensions (Components, Modules, Plugins)

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 30 Αύγ 2013 00:25

Καλησπέρα
είναι εφικτό να κάνω το menu στην σελίδα μου να είναι μονίμως στην κορυφή ακόμα και όταν κάνω scroll down? Τι παραμετροποιήσεις πρέπει να κάνω;
Παράδειγμα http://www.dwuser.com/education/content ... plete.html
Ευχαριστώ

seeder
Δημοσιεύσεις: 197
Εγγραφή: 11 Αύγ 2011 20:12

Fixed menu (floating)

Δημοσίευση από seeder » 30 Αύγ 2013 06:07

Το λινκ που εδωσες λέει ακριβώς τι πρεπει να κανεις.
Αυτο θελει λιγη δουλεια στο template σου.
Εαν γνωρίζεις απο html , css και javascript μπορεις να το κανεις.
Αν οχι και ζητας καποιο joomla! extention δυστυχώς δεν υπάρχει έτοιμο απο όσο γνωρίζω .
Επειδή δουλευω κατι παρόμοιο πες μου ποιο templete εχεις και δωσε ενα λινκ να δω μηπως ταιριάζει, αν και το βλεπω λιγο δυσκολο. :)


seeder
Δημοσιεύσεις: 197
Εγγραφή: 11 Αύγ 2011 20:12

Fixed menu (floating)

Δημοσίευση από seeder » 30 Αύγ 2013 12:36

Ναι μπορεις να τα χρησιμοποιήσεις αυτα. Αν το μενου σου είναι οριζόντιο το βάζεις σε μια θεση που καταλαμβάνει όλο το πλάτος της σελίδας και θα μένει στην κορυφή .
Με λιγο δουλεια όπως λες απλά θα πρεπει να ορισεις τα υπολοιπα να περνουν απο κατω.
Δεν τα εχω δουλεψει, ισως είναι κατι ευκολο ή δυσκολο, δεν γνωρίζω να σου πω.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 30 Αύγ 2013 12:43

Βρήκα ένα έτοιμο,
http://extensions.joomla.org/extensions ... bnUiO30%3D
Θα το παλέψω λίγο όμως μήπως βρω άλλη λύση "δωρεάν" ώστε να την μοιραστώ μαζί σας.
@seeder το link δεν λέει τι πρέπει να κάνεις σε joomla υπάρχει μεγάλη διαφορά

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 31 Αύγ 2013 01:03

Συνήθως σε κάτι τέτοιες στιγμές επεμβαίνει ο alou (παλαιότερα ο Fafos) σαν απο μηχανής Θεός

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 31 Αύγ 2013 16:47

Ξεκίνησα την προσπάθεια με αυτό
http://www.jay-han.com/2011/11/10/simpl ... th-jquery/ αλλά νομίζω πως το template που χρησιμοποιώ έχει λίγο πολύπλοκο κώδικα. Στοιχεία του μενου έχει στο template.css αλλά και στο menu.css

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 01 Σεπ 2013 14:49

ο κώδικας του menu.css

Κώδικας: Επιλογή όλων

#hornav,#sublevel {position:relative;margin:0 5px}
#hornav .megacol,#sublevel .megacol {float:left}
#hornav .megacol > ul.sp-menu {border-right:1px solid #e5e5e5}
#hornav .megacol.last > ul.sp-menu,#hornav .megacol:last-child > ul.sp-menu {border-right:none}
#sublevel ul.empty,#sublevel li.empty {height:0px!important;display:none} 
#hornav ul li,#sublevel ul li{background:none;padding:0;margin:0} 

/*Top Level*/
#hornav {background:#070608 url(../images/hornav.png) repeat-x 0 0}
#sublevel{margin-top:1px;background:#222}

#hornav ul.level-0,
#sublevel ul.level-1{float:left;margin:0;padding:0}

#hornav ul.level-0 > li.menu-item,
#sublevel ul.level-1 > li.menu-item{background:none;display:block;float:left;margin:0;padding:0}

#hornav ul.level-0 > li.menu-item {border-right:1px solid #222}
#hornav ul.level-0 > li.menu-item.last{border-right:0}

#hornav ul.level-0 > li.menu-item > a.menu-item,
#sublevel ul.level-1 > li.menu-item > a.menu-item{display:block;font-size:12px;font-weight:700;line-height:100%;text-decoration:none;margin:0;padding:10px 15px;color:#999}

#hornav ul.level-0 > li.menu-item span.has-image,
#sublevel ul.level-1 > li.menu-item span.has-image{padding-left:30px;display:block;background-repeat:no-repeat;background-position:0 50%}

#hornav ul.level-0 > li.menu-item span.menu-title,
#sublevel ul.level-1 > li.menu-item span.menu-title{display:block;text-transform:uppercase}

#hornav ul.level-0 > li.menu-item span.menu-desc,
#sublevel ul.level-1 > li.menu-item span.menu-desc{display:block;font-weight:400;font-size:92%;color:#777}

#hornav ul.level-0 > li.menu-item.parent:hover > a,
#sublevel ul.level-1 > li.menu-item.parent:hover > a{background-color:#FFF;color:#000;margin:5px 5px 0 5px;padding:5px 10px 10px 10px; border-radius:6px 6px 0 0}

#hornav ul.level-0 > li.menu-item.active span.menu-desc,#hornav ul.level-0 > li.menu-item:hover span.menu-desc,
#sublevel ul.level-1 > li.menu-item.active span.menu-desc,#sublevel ul.level-1 > li.menu-item:hover span.menu-desc{color:#999}

#hornav li.menu-item li:hover,#hornav li.menu-item li.active,
#sublevel li.menu-item li:hover,#sublevel li.menu-item li.active{background:#f5f5f5!important}

#hornav ul.level-0 > li.parent > a.menu-item span.menu,
#sublevel ul.level-1 > li.parent > a.menu-item span.menu {display:block;background:none;padding:0}

#hornav ul li.parent > a.menu-item span.menu,
#sublevel ul li.parent > a.menu-item span.menu {display:block;padding-right:12px;background:url(../images/daddy.png) no-repeat 100% 50%}

/*Submenu*/
#hornav li .submenu,#sublevel li .submenu {position: absolute;display:none;z-index:9999}

/*Styling subnav*/
#hornav ul ul,
#sublevel ul ul {float: none;}

#hornav li.menu-item li.menu-item,
#sublevel li.menu-item li.menu-item {background:none;display:block;margin:0;padding:0;float:none}

#hornav li.menu-item li.menu-item a.menu-item,
#sublevel li.menu-item li.menu-item a.menu-item{display:block;font-size:92%;font-weight:400;line-height:normal;text-decoration:none;margin:0;padding:10px;color:#000;border-top:1px solid #e5e5e5}

#hornav li.menu-item li.menu-item a.menu-item.first,
#sublevel li.menu-item li.menu-item a.menu-item.first { border-top: none; }

#hornav li.menu-item li.menu-item span.menu-title,
#sublevel li.menu-item li.menu-item span.menu-title{text-transform:none}
#hornav li.menu-item li.menu-item span.menu-desc,
#sublevel li.menu-item li.menu-item span.menu-desc{color:#888}

#hornav ul li .submenu-inner,#sublevel ul li .submenu-inner {background:#fff;color:#000}}

/*Dropline or Split menu*/
#sublevel ul.level-1 > li.menu-item{background:none;margin-right:5px}
#sublevel ul.level-1 > li.menu-item > a.menu-item{color:#999}
#sublevel ul.level-1 > li.menu-item span.has-image{}
#sublevel ul.level-1 > li.menu-item span.menu-title{text-transform:inherit}
#sublevel ul.level-1 > li.menu-item span.menu-desc{}

/*Group*/
* html .group{height:0}
#hornav ul li.menu-item .group{background:none!important;overflow:hidden}
#hornav .group-title{overflow:hidden;border-bottom:1px solid #e5e5e5}
#hornav .group-title span.menu-title{font-size:13px;font-weight:700;line-height:100%;color:#0;text-transform:uppercase!important}
#hornav .group-title .menu-desc{padding-left:0!important;color:#888}
#hornav .group-content .mod-wrapper-menu {margin:10px}
Αντικατέστησα την πρώτη γραμμή με

Κώδικας: Επιλογή όλων

#hornav {position: fixed;
width: 1024px;
z-index: 99999;}
ul.sp-menu {margin:0}
#sublevel {position:absolute;margin:0 5px}
Ναι μεν πλησίασα αυτό που θέλω, αλλά παραμένουν δυο προβλήματα.
1. Το submenu ανοίγει πολύ πιο κάτω απ' την μπάρα του μενού
2. Επειδή το μενού δεν είναι ακριβώς στην κορυφή αλλά είναι κάτω απο το logo + ενα banner θέλω η μπάρα στο scroll down να πηγαίνει απευθείας ontop, όπως στο jquery tutorial που έδειξα πιο πάνω (http://www.jay-han.com/2011/11/10/simpl ... th-jquery/)

Συνεχίζω ακάθεκτος και θα ενημερώσω. Δεκτή κάθε βοήθεια

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Fixed menu (floating)

Δημοσίευση από alou » 02 Σεπ 2013 00:49

LOL για το παραπάνω post! (πάντως έλλειπα) υπάρχει link; αν ναι, λύνεται εύκολα, αν όχι βάλε σε ένα fiddle ή paste εδώ την html μέχρι και λίγο μετά το μενού και το css, χρειάζονται και τα δυο για να βρούμε άκρη.

Άσε τα πρόσθετα, λίγες γραμμές css και άλλες 2 javascript είναι όλη η υπόθεση, να αλλάξεις postitioning στο menu όταν φτάσει σε κάποιο σημείο.

Αν είναι joomla 3, το πιο πιθανό είναι ότι το template καλεί ήδη bootstrap.js οπότε ίσως απλά χρειάζεται η κατάλληλη html.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Fixed menu (floating)

Δημοσίευση από alou » 02 Σεπ 2013 03:57

Σε γενικές γραμμές, εκείνο που κάνεις είναι με javascript να "ακούσεις" το scroll event, να ελέγξεις το top offset του οριζόντιου μενού και εφόσον είναι μικρότερο από το scrollTop, να κάνουμε το position του μενού fixed. Παράλληλα, βάζεις και ένα flag για να κάνεις το αντίθετο, κάτω από τις αντίθετες συνθήκες και εφόσον είναι ήδη fixed.

Insurer, η html είναι μπάχαλο αλλά αν βάλεις αυτό στο head του template και πιθανώς βγάζοντας άλλα js script που έχεις (δεκάδες είδα, δεν ξέρω τι είναι) θα δουλέψει, αν δε γίνεται conflict με κάτι άλλο:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
var nav = $&#40;'#hornav'&#41;;
var navHomeY = nav.offset&#40;&#41;.top;
var $w = $&#40;window&#41;;

var isFixed = false;   
$w.scroll&#40;function&#40;&#41; &#123;
        var scrollTop = $w.scrollTop&#40;&#41;;
        var shouldBeFixed = scrollTop > navHomeY;
        if &#40;shouldBeFixed  && !isFixed&#41; &#123;
            nav.css&#40;&#123;
                position&#58; 'fixed',
                top&#58; 0,
                left&#58; nav.offset&#40;&#41;.left,
                width&#58; nav.width&#40;&#41;
            &#125;&#41;;
            isFixed = true;
        &#125;
        else if &#40;!shouldBeFixed && isFixed&#41;
        &#123;
            nav.css&#40;&#123;
                position&#58; 'static'
            &#125;&#41;;
            isFixed = false;
        &#125;
    &#125;&#41;;
&#125;&#41;
</script>
http://jsfiddle.net/5Jgrg/

Είναι από το παράδειγμα στο link σου σχεδόν, λίγο προσαρμοσμένο.

Όμως υπάρχουν και compressed js για το μενού σου που δεν μπορώ να δω τι κάνουν και ίσως δημιουργούν πρόβλημα, γενικά έχεις φορτώσει την Άρτα και τα Γιάννενα...

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 02 Σεπ 2013 11:09

Άρα ας πούμε πως τώρα θα προσθέσω την Πρέβεζα

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 02 Σεπ 2013 13:05

Τζίφος δεν δούλεψε

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Fixed menu (floating)

Δημοσίευση από alou » 02 Σεπ 2013 13:35

Μπορείς να αφήσεις το script που σου έδωσα στο head για να το δω? Αν δε δουλεύει, είναι λόγω javascript conflict 99% γιατί με τη δική σου html / css στο fiddle είναι ΟΚ.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Fixed menu (floating)

Δημοσίευση από Insurer » 02 Σεπ 2013 13:59

Το έβαλα
error log
TypeError: Object #<HTMLDocument> has no method 'ready'

Κώδικας: Επιλογή όλων

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123; 

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Fixed menu (floating)

Δημοσίευση από alou » 02 Σεπ 2013 19:42

Για την ιστορία: είναι ΟΚ. Υπήρχε όμως το εξής πρόβλημα, που ήθελε κάποια κολπάκια:

Αλλάζοντας το div που περιείχε το μενού σε fixed position, τα submenu που ήταν επίσης σε div (το προσπερνάω αλλά είναι λάθος markup) που ήταν absolute positioned, πήγαιναν όπου νάναι γιατί δεν υπήρχε ο συσχετισμός του positioning με το γονικό μενού. Οπότε έπρεπε να γίνουν static positioned τα submenu και να παίξεις με σταθερό πλάτος στα parent menu items.

Απάντηση

Επιστροφή στο “Joomla! Extensions (Components, Modules, Plugins)”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες