HTML + CSS avulla valikko

Tapio-Huuhaa

8

1898

Äänestä

    Vastaukset

    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. Taas puukotus yläristillä!

      Tänään taas puukotettu hengiltä ihminen Kuopiontien läheisyydessä yläristillä! Nyt näitä alkaa olla viikoittain!
      Pieksämäki
      61
      1834

    2. Olen päättänyt tappaa itseni tämän vuoden puolella

      Minulla ei ole oikeastaan mitään hävittävää. Elämäni on surkeaa ja tunnen ihmisten tuijotukset ja supinat. Ne nauravat r
      Ikävä
      150
      1578

    3. Mitä teillä grillataan juhannuksena? Anna oma vinkkisi grilliherkkuihin

      Kesä ja juhannus on grillailun kulta-aikaa. Mitä teillä grillataan juhannuksena? Anna oma vinkkisi grilliherkkuihin. Ka
      Grillaus
      72
      1278

    4. La Promesa sarjan ystäville iso pettymys - Yleltä lisäinfoa asiasta

      La Promesa suosikkisarjan kohtalosta on tullut tietoa. Tämä ei kyllä välttämättä ilahduta sarjan faneja. Lue lisää: htt
      Tv-sarjat
      12
      933

    5. Mä muuten kerroin puolisolle susta

      Nimeä mainitsematta....
      Ikävä
      98
      898

    6. Paljonko meidän ikäero on?

      Ois kiva tietää.
      Ikävä
      87
      780

    7. Nainen onko kaikki

      Onko sinulla nainen kaikki hyvin? mies
      Ikävä
      62
      593

    8. Nyt kun olen vähän huppelissa niin uskallan sanoa

      Mikä minua oikein närästää... Tiedän että meillä on ollut vaikeaa mutta miten kauan sulla on ollut toinen mies vai oliko
      Ikävä
      40
      573

    9. Mies onko sinulla

      Kaikki hyvin? 🌞 -nainen
      Ikävä
      38
      534

    10. Toivotetaanko toisillemme

      Juhannuksia vai ollaanko vihoissa
      Ikävä
      55
      496
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt