HTML + CSS avulla valikko

Tapio-Huuhaa

8

1901

Äänestä

    Vastaukset 8

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Turbo-Urpo1

      Vaikutti siltä että olet tekemässä navigointipalkkia, jossa on suoria linkkejä ja pudotusvalikkon alaisia linkkejä sivustosi muuhun sisältöön. Yksi tärkeimmistä ohjeista on ettet käytä tyylimäärittelyissä jo olemassa olevia id- ja class- nimiä, omissa lisäyksissä, mikäli teet sen on erittäin todennäköistä että sivustosi asettelu romahtaa jossakin kohtaa ei toivotuksi.

      Omat CSS -tiedostoon tulevat lisäykset sijoitat joko erillisenä tiedostona, tai sijoitat jo olemassa olevan tiedoston loppuun. Valmiita malleja ja ohjeita on varmasti ihan tarpeeksi. Tällä sivulla on nuo mallineet ladattavissa valmiiksi *.zip paketissa, mutta myös on mahdollista tutkailla lähdekoodia ja noukkia siltä mistä miellyttävin tulee vastaan. http://cssmenumaker.com/css-drop-down-menu

      Google auttaa mielellään näillä hakusanoilla:
      Navigointipalkki (Navigation Bar)
      Pudotusvalikko (DropDown Menu)

      http://cssmenumaker.com/css-drop-down-menu

    • Tapio-Huuhaa

      En käyttänyt olemassa olevia id-attribuuttia omassa lisäyksessäni. Viimeksi tein niin, että tein valikon WordPressin omalla valikkotyökalulla. Se luo valikolle ja sen emo-elementille uniikin luokan ja id. Se ei toiminut yhtään sen paremmin kuin ihan käsin koodaamani valikko.

      Alasvertovalikko toimi hienosti esikatselussa eli toimi ihan samoin kuin kuvakaappauksessa näkyvä käsin kirjoittamani valikko. Mutta sekään ei toiminut itse. Sivulla täytyy olla joki koodi, mikä estää sen toimimisen. En vaan millään ymmärrä, mikä se voisi olla.

      WordPress sijoittaa oman CSS:n juuri ennen HEAD-tägin päätöstä ts. se luetaan viimeiseksi.

      Yritin avittaa lisäämällä ns. suckerfish JavaScriptin ja erään toisen, mutta ei auttanut.

      • Turbo-Urpo1

        Otin yhden noista linkin takaa löytyvistä malleista ja sijoitin HTML -koodin Pääsivun sivupohjalle (index.php), ja CSS -osuuden teeman "Oma CSS" -kenttään. No tietysti se toimii:

        https://i.postimg.cc/7P07vMms/29-11-2018-00-52-23.png

        Tosin tuo ei tyylillisesti kuitenkaan istu sivun omaan teemaan, joten näön vuoksi jotain olisi pitänyt muokata, eikä vain kopioida valmista tavaraa semmosenaan sivulle.

      • Tapio-Huuhaa

        Valmiin koodin muokkaus teettää aika lailla käsitöitä, koska linkit joutuu laittamaan käsin. Minulla kun ei ole ohjelmaa, mikä sen loisi ja ymmärtääkseni tuo menumaker on maksullinen.

        Alla CSS-koodi, jonka pitäisi toimia WordPressin luomien valikoiden kanssa (liittyy kahteen eri valikkoon). Kokeilin sekä visibility että display-ominaisuuksilla. Display-ominaisuudella avautuivat hieman nopeammin.


        #menu-kovisoveluudet-ja-vihjeanalyysit,
        #menu-kovisoveluudet-ja-vihjeanalyysit *,
        div.menu-ylavalikko-container li#menu-item-145 * {
        border-width:0;
        }
        /*Valikkojen yleiset tyylit*/
        #menu-kovisoveluudet-ja-vihjeanalyysit,
        #menu-kovisoveluudet-ja-vihjeanalyysit ul,
        div.menu-ylavalikko-container li#menu-item-145 ul {
        /* height: 0.8em; Asetetaan elementin korkeus (tarvitaan alavalikkojen sijoituksessa) - ei ole tarvetta, kun alivalikkotasoja on vain yksi */
        /*Postetaan sisennykset*/
        margin: 0;
        padding: 0;
        background-color:white;
        }

        /*Valikkojen valintojen ykeiset tyylit**/
        #menu-kovisoveluudet-ja-vihjeanalyysit li {
        list-style-type: none; /*Poistetaan listan pallot*/
        position: relative;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489{
        float: left;
        background-image: url(
        https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/2018/11/pikkunuoli.png);
        background-position: 95% 50%;
        background-repeat: no-repeat;
        width:130px;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit a {
        font-size: 15px;
        font-size: 0.9rem;
        font-weight:600;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        -webkit-box-shadow: 0ms ease-in-out;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit a:link,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:visited,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:active,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:hover {
        text-decoration:none;
        box-shadow: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        -webkit-box-shadow: none;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit a:hover {
        color: #767676;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit li ul {
        z-index:100013;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li ul * {
        background-color: white;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471 li {
        width:250px;
        padding-left:5px;
        z-index:100014;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489 li {
        width:250px;
        padding-left:5px;
        z-index:100014;
        }
        /*Alavalikkojen tyylit*/
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471 ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489 ul,
        div.menu-ylavalikko-container li#menu-item-145 ul
        {

        display: none; /* visibility:hidden;*/
        /*Piilotetaan alavalikot*/
        /*Sijoitetaan alavalikot paikoilleen*/
        position: absolute; /*Sijoitetaan suhteessa "isäntään"*/
        left: 2px; /*Siirretään lievästi oikealle*/
        top: 24px;
        /*Siirretään ylimmän valikon alle */
        z-index:100013;
        }
        /*Alavalikko näytettäessä*/
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471:hover ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489:hover ul,
        div.menu-ylavalikko-container li#menu-item-145:hover ul
        {
        display: block;
        /*visibility:visible;*/
        /*Näytetään alavalikot*/
        }

      • Turbo-Urpo1
        Tapio-Huuhaa kirjoitti:

        Valmiin koodin muokkaus teettää aika lailla käsitöitä, koska linkit joutuu laittamaan käsin. Minulla kun ei ole ohjelmaa, mikä sen loisi ja ymmärtääkseni tuo menumaker on maksullinen.

        Alla CSS-koodi, jonka pitäisi toimia WordPressin luomien valikoiden kanssa (liittyy kahteen eri valikkoon). Kokeilin sekä visibility että display-ominaisuuksilla. Display-ominaisuudella avautuivat hieman nopeammin.


        #menu-kovisoveluudet-ja-vihjeanalyysit,
        #menu-kovisoveluudet-ja-vihjeanalyysit *,
        div.menu-ylavalikko-container li#menu-item-145 * {
        border-width:0;
        }
        /*Valikkojen yleiset tyylit*/
        #menu-kovisoveluudet-ja-vihjeanalyysit,
        #menu-kovisoveluudet-ja-vihjeanalyysit ul,
        div.menu-ylavalikko-container li#menu-item-145 ul {
        /* height: 0.8em; Asetetaan elementin korkeus (tarvitaan alavalikkojen sijoituksessa) - ei ole tarvetta, kun alivalikkotasoja on vain yksi */
        /*Postetaan sisennykset*/
        margin: 0;
        padding: 0;
        background-color:white;
        }

        /*Valikkojen valintojen ykeiset tyylit**/
        #menu-kovisoveluudet-ja-vihjeanalyysit li {
        list-style-type: none; /*Poistetaan listan pallot*/
        position: relative;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489{
        float: left;
        background-image: url(
        https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/2018/11/pikkunuoli.png);
        background-position: 95% 50%;
        background-repeat: no-repeat;
        width:130px;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit a {
        font-size: 15px;
        font-size: 0.9rem;
        font-weight:600;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        -webkit-box-shadow: 0ms ease-in-out;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit a:link,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:visited,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:active,
        #menu-kovisoveluudet-ja-vihjeanalyysit a:hover {
        text-decoration:none;
        box-shadow: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        -webkit-box-shadow: none;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit a:hover {
        color: #767676;
        }

        #menu-kovisoveluudet-ja-vihjeanalyysit li ul {
        z-index:100013;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li ul * {
        background-color: white;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471 li {
        width:250px;
        padding-left:5px;
        z-index:100014;
        }
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489 li {
        width:250px;
        padding-left:5px;
        z-index:100014;
        }
        /*Alavalikkojen tyylit*/
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471 ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489 ul,
        div.menu-ylavalikko-container li#menu-item-145 ul
        {

        display: none; /* visibility:hidden;*/
        /*Piilotetaan alavalikot*/
        /*Sijoitetaan alavalikot paikoilleen*/
        position: absolute; /*Sijoitetaan suhteessa "isäntään"*/
        left: 2px; /*Siirretään lievästi oikealle*/
        top: 24px;
        /*Siirretään ylimmän valikon alle */
        z-index:100013;
        }
        /*Alavalikko näytettäessä*/
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2471:hover ul,
        #menu-kovisoveluudet-ja-vihjeanalyysit li#menu-item-2489:hover ul,
        div.menu-ylavalikko-container li#menu-item-145:hover ul
        {
        display: block;
        /*visibility:visible;*/
        /*Näytetään alavalikot*/
        }

        HIENO HOMMA SINÄ SAIT SEN SINNE, nyt on oikee meininki ! JEES !!

        Mutta se Googlen reCAPTCHA näyttää vielä puuttuvan, vai luovuitko siitä. Et varmaan ole vielä kerinnyt kun tuo valikkon työstäminen on kovasti aikaa viepä, ennen kuin sen saa istumaan osaksi sivua. https://i.postimg.cc/N033H462/28-11-2018-23-45-00.png

    • Tapio-Huuhaa

      No nyt valikko toimii. On outo asia, mutta kun eilen koitin valikkoa, se ei ei toiminut.

      Captchaa en vieläkään osannut määrittää.

    • Tapio-Huuhaa

      Eilen oli AdBlock päällä sivustollani. AdBlock taitaa blokata tietyntyypin valikotkin. Ongelma ei siis johtunut virheellisestä koodauksesta.

    • Tapio-Huuhaa

      Anteeksi. Tämä säie oli totaalisen turha. En nyt vain osannut odottaa, että AdBlock pitää kaikki hover-efektit arveluttavina ja siten se estää tuiki tavallisten pudotusvalikoidenkin toiminnan.

    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Takaisin ylös

    Luetuimmat keskustelut

    1. Kuollut teini Kajaanissa

      Kuulemma sellaista huhua liikkeessä?
      Kajaani
      10
      1979

    2. Perhoseni (miehelle)

      Miksi et usko, että mun rakkaus sinuun on aitoa ja vilpitöntä? Tai että se oli jo silloin? Miksi ajattelet, ettet ole r
      Ikävä
      167
      1098

    3. Totta on asia. Jeffrey Cohen on jättänyt Sofian.

      Vaimon viesti on paljastanut totuuden.
      Kotimaiset julkkisjuorut
      265
      1021

    4. Uskallatko paljastaa

      Millä nimellä löydyn puhelimestasi?
      Ikävä
      79
      877

    5. Halaus juuri sinulle

      Kaikki järjestyy kyllä. Luota vain. ❤️🫶
      Ikävä
      63
      798

    6. Uskaltaisitko

      Tavata kaivattusi tässä tilanteessa?
      Ikävä
      82
      798

    7. Mies, näetkö minut myös

      Seksuaalisena ihmisenä ja naisena? Haluatko minua seksuaalisesti? Vai olenko mielestäsi tyttönen?
      Ikävä
      22
      706

    8. Kuinkahan monen

      Naisen puolisoa olet nainen vikitellyt ja eron aiheuttanut? Toivottavasti karma on ku*sut muroihisi useamman kuin kerran
      Ikävä
      69
      681

    9. Mitä sä haluat vanhus?

      🤣🤣🤣🤣🤣
      Ikävä
      65
      661

    10. Nainen, mitä mieltä olet kodittomista?

      Ja heistä jotka eivät kykene huolehtimaan asioistaan, itsestään eikä terveydestään? Miten heidän kanssaan tulisi toimia?
      Ikävä
      138
      657

    11. Meneekö unohtamis

      Projektisi hyvin??
      Ikävä
      42
      619

    12. Mies, kumman ottaisit mieluummin

      176 cm vai 154 cm naisen, jos molemmat muuten yhtä viehättäviä? Mikä on oma pituutesi?
      Sinkut
      125
      611

    13. Voiko se ikinä toimia

      Voiko meistä ikinä tulla mitään? Näin kauan aikaa on kulunut ja mitään ei tapahdu... En usko, että sinä mietit minua het
      Ikävä
      32
      598

    14. Kauan mökötetään toisillemme?

      Loppuelämäkö? Vai oisko jo pussailutreffit?
      Ikävä
      52
      572

    15. Tekisi mieli vetäistä kunnon jurrit sinun kanssasi

      Ja keskustella asiat, ei tästä tule hevonvttua.
      Ikävä
      44
      559

    16. Eikö olisi mukavaa

      Jakaa arki yhdessä mies. Tämmöisin aatoksin.
      Ikävä
      40
      544

    17. Voin tulla

      Sisustamaan sulle 🤭
      Ikävä
      55
      538

    18. Pettymys TTK-parketilla! Anna Hanski tippui - Sami-opelta erikoinen heitto: "Nyt sä pääset..."

      Toisena parina Tanssii Tähtien Kanssa -kisasta tippuivat Anna Hanski ja Sami Helenius. Pettymys oli käsinkosketeltava y
      Tanssii tähtien kanssa
      21
      509

    19. Kerro mies tarinasi

      Miksi kaikki meni niinkuin meni? Haluaisin vieläkin ymmärtää. Tuskin saan vastausta häneltä, koska etsin aavikolta juuri
      Ikävä
      20
      508

    20. Anteeksi mies

      En jaksa tätä…, en halua, että sinulla on paha mieli tämän takia. Viestiä Sinulle.
      Ikävä
      40
      503
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt