one page website - different css style on menu

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 13:30

Καλησπέρα παιδια.
Η απορία μου ειναι η εξής:
Πως μπορώ σε one page website που γίνεται scroll όταν πηγαίνω σε ένα συγκεκριμένο div (καθώς κάνω scroll) στο μενού να εφαρμόζω άλλο style css εκτώς από αυτό που έχω δημιουργήσει με τις active καταστάσεις?
Ευχαριστώ πολύ!

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από giannis17 » 19 Φεβ 2014 13:49

Αν το περιεχόμενο της σελίδας φορτώνεται με ajax κατά το scroll τότε γίνεται αυτό που θες (πχ http://www.w3bees.com/2013/09/jquery-in ... mysql.html ), αλλιώς δεν υπάρχει scroll event για να το κάνεις capture με javascript. Απλά μέσα στον ajax κώδικα θα προσθέσεις

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

if(document.getElementById('eidiko-div')){ document.getElementById("menu").className = "special-menu"; }
ώστε σε κάθε div που φέρνει να τσεκάρει αν έχει id "eidiko-div" ώστε να αλλάζει το class του menu, δεν χρειάζεσαι καν ξεχωριστό αρχείο css, απλά προσθέτεις ιδιότητες σε ένα class .special-menu
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 14:00

ευχαριστώ πολύ. Θα το τσεκάρω και σου πω!

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 14:10

δυστηχώς δεν μου δουλευει.
αυτό που θέλω είναι ενώ υπάρχουν οι active καταστάσεις στο μενού μού, σε κάποιο div to background είναι σκούρο οπότε το active toy μενού μου πρέπει να αλλάξει class. γιατι δεν φαίνεται. το ιδιο θα χρειαστώ και σε άλλα div που υπάρχουν παρακάτω.

Δηλαδή αν το div me id ='section1' ειναι στην κορυφή του browser τότε να μπορώ να εφαρμόσω σε συγκεκριμένα <li> του μενού καποιο άλο css style.

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από giannis17 » 19 Φεβ 2014 14:53

αυτό φαντάζομαι είναι πρόβλημα επειδή χρησιμοποιείς διαφανή/ημιδιαφανή background στο μενού σου. Αν χρησιμοποιήσεις solid background που είναι το πρόβλημα;
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

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

one page website - different css style on menu

Δημοσίευση από alou » 19 Φεβ 2014 14:56

Φαντάζομαι ότι το μενού σου είναι fixed και κάνει πίσω του scroll το υπόλοιπο περιεχόμενο?

Θα χρειαστείς jQuery (για ευκολία) και να τσεκάρεις το offset.top του στοιχείου που λες ότι έχει σκούρο φόντο. Στο παράδειγμα που σου έφτιαξα, άφησα να φαίνονται τα 2 νούμερα που συγκρίνω για να γίνει αλλαγή στο css, ώστε να καταλάβεις πως δουλεύει.

Αν έχεις απορία φυσικά ρωτάς

http://jsfiddle.net/9ePCa/

html

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

<div id="menu" style="position&#58;fixed;top&#58;50px;left&#58;50px;padding&#58;10px;border&#58;1px dashed black;">
    Αυτό είναι το μενού σου υποτίθεται
    <span id="helper"></span>
</div>
<div style="background&#58;grey;height&#58;1000px;width&#58;100%">
</div>
<div id="dark" style="background&#58;black;height&#58;1500px;">
</div>

js (έχεις ήδη κάνει link το jQuery library και μετά αυτό)

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

jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123;
$&#40;window&#41;.on&#40;'scroll', function&#40;&#41; &#123;
var scrollAmount = $&#40;window&#41;.scrollTop&#40;&#41;;
var eleDistance = $&#40;'#dark'&#41;.offset&#40;&#41;.top;
$&#40;'#helper'&#41;.html&#40;eleDistance + ' - ' + scrollAmount&#41;;
    if &#40;scrollAmount >=  eleDistance&#41; &#123;
        $&#40;'#menu'&#41;.css&#40;'background-color', 'white'&#41;.css&#40;'color','black'&#41;;
        
    &#125; else &#123;
        $&#40;'#menu'&#41;.css&#40;'background-color', 'black'&#41;.css&#40;'color','white'&#41;;
    &#125;

&#125;&#41;;
&#125;&#41;;

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 16:13

μπορει στο παραδειγμα να μπει μενου με <ul><li></li></ul> και σε καθε διαφορετικο div καθώς κάνεις scroll να αλλάζει το active link css?

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 16:39

http://jsfiddle.net/9ePCa/2/

στο παραπάνω δικό σου παράδειγμα έχω κάποια id στα λινκ του μενου.
Θέλω να εφαρμόζεται το css μόνο όταν κάνω κλικ στο αντιστοιχο div.

Για παράδειγμα όταν κάνω κλικ στο μενού home θέλω το μενού home που είναι και το active να γίνεται κοκκινο. Τα υπολοιπα να είναι μαυρα.
Όταν κάνω κλικ στο μενου about MONO το μενου about να αλλάζει χρώμα και τα υπόλοιπα μενού έχουν την default τιμή

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

one page website - different css style on menu

Δημοσίευση από alou » 19 Φεβ 2014 17:08

Στο παράδειγμα όχι, είναι τελείως άλλο πράγμα αυτό που ζητάς...

http://jsfiddle.net/qX3ar/7/

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

<div id="menuwrap" style="position&#58;fixed;top&#58;50px;left&#58;50px;padding&#58;10px;border&#58;1px dashed black;">
    <ul id="menu">
        <li class="menuitem active" id="home">Home</li>
        <li class="menuitem" id="about">about</li>
        <li class="menuitem" id="othershit">other shit</li>
        <li class="menuitem" id="contact">contact</li>
    </ul>
    <span id="helper"></span>
</div>
<section class="sections" id="first" data-where="home">
</section>
<section class="sections" id="second" data-where="about">
</section>
<section class="sections" id="third" data-where="othershit">
</section>
<section class="sections" id="fourth" data-where="contact">
</section>

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

$&#40;window&#41;.on&#40;'scroll', function&#40;&#41; &#123;
    $&#40;'.sections'&#41;.each&#40;function&#40;&#41;&#123;
        var scrollAmount = $&#40;window&#41;.scrollTop&#40;&#41;;
        var eleDistance = $&#40;this&#41;.offset&#40;&#41;.top;
        if &#40;scrollAmount >= eleDistance&#41; &#123;
            var makeActive = $&#40;this&#41;.attr&#40;'data-where'&#41;;
            $&#40;'#menu li'&#41;.removeClass&#40;'active'&#41;;
            $&#40;'#menu li#' + makeActive&#41;.addClass&#40;'active'&#41;;
        &#125;
    &#125;&#41;;
&#125;&#41;;
Αν μου ζητήσεις και hashtag με section id στο url θα σου ζητήσω λεφτά :D

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 17:17

κάτι ακόμα, αυτό που ζητάω να γίνεται είναι αν σε κάθε μενού όταν κανείς κλικ να αλλάζει το css (να είναι διαφορετικο). Δηλαδή να μην είναι το ιδιο οπως όρισες
#menu li.active {color:red;background:#999999;}

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

one page website - different css style on menu

Δημοσίευση από alou » 19 Φεβ 2014 17:26

Καταρχάς, όλο μαζί, αλλάζοντας active state και κάνοντας scroll με μενού κλικ

http://jsfiddle.net/qX3ar/11/

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

<div id="menuwrap" style="position&#58;fixed;top&#58;50px;left&#58;50px;padding&#58;10px;border&#58;1px dashed black;">
    <ul id="menu">
        <li class="menuitem active" id="home" data-link="first">Home</li>
        <li class="menuitem" id="about" data-link="second">about</li>
        <li class="menuitem" id="othershit" data-link="third">other shit</li>
        <li class="menuitem" id="contact" data-link="fourth">contact</li>
    </ul>
    <span id="helper"></span>
</div>
<section class="sections" id="first" data-where="home">
</section>
<section class="sections" id="second" data-where="about">
</section>
<section class="sections" id="third" data-where="othershit">
</section>
<section class="sections" id="fourth" data-where="contact">
</section>

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

$&#40;window&#41;.on&#40;'scroll', function&#40;&#41; &#123;
    $&#40;'.sections'&#41;.each&#40;function&#40;&#41;&#123;
        var scrollAmount = $&#40;window&#41;.scrollTop&#40;&#41;;
        var eleDistance = $&#40;this&#41;.offset&#40;&#41;.top;
        if &#40;scrollAmount >= eleDistance&#41; &#123;
            var makeActive = $&#40;this&#41;.attr&#40;'data-where'&#41;;
            $&#40;'#menu li'&#41;.removeClass&#40;'active'&#41;;
            $&#40;'#menu li#' + makeActive&#41;.addClass&#40;'active'&#41;;
        &#125;
    &#125;&#41;;
&#125;&#41;;

$&#40;'#menu li'&#41;.on&#40;'click', function&#40;e&#41;&#123;
    e.preventDefault&#40;&#41;;
    //$&#40;'#menu li'&#41;.removeClass&#40;'active'&#41;; 
    //$&#40;this&#41;.addClass&#40;'active'&#41;;
     $&#40;'html, body'&#41;.animate&#40;&#123;
        scrollTop&#58; $&#40;'#'+ $&#40;this&#41;.attr&#40;'data-link'&#41;&#41;.offset&#40;&#41;.top
    &#125;, 1000&#41;;
&#125;&#41;
Για να κάνεις αυτό που θες, θα παίξεις στο css και με το id και με το class του #menu li
πχ #menu li.active#about {color:green;background:yellow;}
επόμενο παράδειγμα πάλι σε fiddle

http://jsfiddle.net/Jb6Hm/

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 19 Φεβ 2014 17:36

εισαι αρχηγός!!!
δεν ειδα ακομα το κωδικα αλλά δουλεύει!!!
ευχαριστώ παρα πολύ!

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 20 Φεβ 2014 11:30

alou καλή σου μέρα! μια ερώτηση 'κρίσεως΄ σχετικα με τα παραπάνω.

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

Γίνεται αυτό που ρωτάω?

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

one page website - different css style on menu

Δημοσίευση από alou » 20 Φεβ 2014 15:14

Κοίτα, άμα είναι να φτιάξουμε ολόκληρο site, πες να σου στείλω μια προσφορά.

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

one page website - different css style on menu

Δημοσίευση από alou » 20 Φεβ 2014 18:35

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

Η λογική είναι αν θες βοήθεια, θα την έχεις όπου μπορούμε αλλά πρώτα ψάξε, προσπάθησε και φτάσε σε ένα σημείο - είτε το κάνεις για εργασία, είτε το κάνεις επαγγελματικά. Αν θες την εργασία / δουλειά έτοιμη, βάλε μια αγγελία.

Το πρόβλημά σου λες ότι είναι να αλλάζει το menu bg κάτω από κάποιες συνθήκες - όταν είναι από πίσω του το Ψ στοιχείο. Δεν λύνεται με CSS, χρειάζεται javascript.
Τι ακριβώς έχεις κάνει μέχρι στιγμής και τι σκέφτεσαι να κάνεις για αυτό? έχεις κάποια ιδέα από javascript ή ότι και να πουμε θα είναι κινέζικα? ο κώδικάς σου μέχρι στιγμής?

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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