HTML + CSS avulla valikko

8

1706

    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

    • 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.


      • 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


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

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

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

    • 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ä.

    Luetuimmat keskustelut

    1. Kaipaatko sinä

      Yhtään meidän katseita
      Ikävä
      208
      2525
    2. Törkeä eläinsuojelurikos Sonkajärvellä

      Pohjois-Savossa Sonkajärvellä noin 40 kissaa ja reilut 10 koiraa on jouduttu lopettamaan kaltoinkohtelun vuoksi, kertoo
      Sonkajärvi
      40
      1664
    3. Jotkut ihmiset pelkäävät syöpää sairastavaa

      On hauskaa, kun kertoo jollekin, että "minulla on syöpä". Jotkut käyttäytyvät kuin se olisi tarttuva tauti. Eivät uskall
      Sinkut
      143
      1305
    4. Lavrov suivaantui Stubbille perustellusti.

      Lavrov perusteli suivaantumistaan tosiasioilla Suomen tarinasta sotiemme jälkeen, tutkija Tynkkynen ja pankkihenkilö Sol
      Maailman menoa
      297
      1121
    5. Sukupuolia on vain kaksi- kohukassista tuli kova tuomio perheenisälle oikeudessa.

      https://www.iltalehti.fi/kotimaa/a/4d4db0d9-4dda-4ba6-a699-25d725683ad6 Miten näin normaalista kassissa olevasta tekstis
      Maailman menoa
      315
      1075
    6. Se ei ihan oikeasti vaatisi kuin yhden

      Tekstiviestin... Jos rakastat minua vielä toivoisin että laittaisit minulle viestiä. Rakastatko? Oletko oikeasti niin pe
      Ikävä
      56
      1032
    7. Kääminsä polttanut taksi suomussalmella

      Vieläkö sillä hermonsa menettäneellä hulluja ylinopeuksia ajavalla asiakkaansa haukkuvalla( jos ajat paska kyydin hänen
      Suomussalmi
      22
      1020
    8. olisit voinut mies edes

      Pyytää anteeksi 🙏🫶
      Ikävä
      55
      936
    9. Jorma Uotinen avaa sanaisen arkkunsa TTK-miesparista ja koko uudistuksesta: "Sehän on..."

      Tanssii Tähtien Kanssa -parketilla nähdään ensimmäistä kertaa Suomessa tanssiparina miespari kauden alusta asti. Mikko S
      Tanssii tähtien kanssa
      21
      843
    10. Eronnut Janni Hussi palaa julkisuuteen - Aloittaa uudessa työssä, joka on aivan uusi pesti Suomessa

      Janni Hussi on saanut viime aikoina kohujulkisuutta, kun hänen ja Joel Harkimon avioliitto päättyi eroon kesällä 2025. H
      Suomalaiset julkkikset
      12
      835
    Aihe