Rekisteröidy

Ilmoitukset

Ladataan…

    Näytä kaikki

    HTML + CSS avulla valikko

    En millään saa https://www.sanaristikkofoorumi.net/wordpress/forums/topic/pudotusvalikko-html-css/

    valikoita toimimaan. Kohdissa, joissa on nuoli alaspäin, pitäisi tulla esiin valikko kun mennään linkin kohdalle.

    Mutta en saa millään toimimaan, enkä keksi, mikä mättää.
    81901
    Äänestä

    Muut lukivat myös

    Vastaukset 8

    Vanhimmat

    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

    Äänestä
    Aloittaja

    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.

    Äänestä

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

      Äänestä
    • Aloittaja

      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*/}

      Äänestä

    • 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

      Äänestä
    Aloittaja

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

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

    Äänestä
    Aloittaja

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

    Äänestä
    Aloittaja

    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.

    Äänestä

    Odottaa vastausta

    Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.

    Luetuimmat keskustelut

    Kommentoi aloitusta

    Tapio-Huuhaa kirjoitti:

    En millään saa https://www.sanaristikkofoorumi.net/wordpress/forums/topic/pudotusvalikko-html-css/

    valikoita toimimaan. Kohdissa, joissa on nuoli alaspäin, pitäisi tulla esiin valikko kun mennään linkin kohdalle.

    Mutta en saa millään toimimaan, enkä keksi, mikä mättää.

    Anonyymi
    5000

    Ilmoita asiaton sisältö

    • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

    • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

    • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

    • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

    • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

    • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

    Jaa keskustelu