Älä tee ylätason navigointivalikosta napsautettavaa Weeblyssä
Weebly tarjoaa helpon sivustonrakennusalustan, joka ei välttämättä ole hyödyllinen useimmille käyttäjille. Esimerkiksi sivujen järjestäminen vaadittuun järjestykseen on Weeblyssä vaikeaa, eikä ylimmän tason navigointivalikon napsauttaminen ole oletuksena mahdollista. Niin kauan kuin Weebly sallii lähde -CSS: n muokkaamisen, voimme tehdä tällaiset asiat mahdolliseksi lisäämällä yksinkertaisen CSS -koodin CSS -päätiedostoon "main_style.css". Tässä artikkelissa keskustelemme siitä, miten ylätason navigointivalikkoa ei voi napsauttaa Weebly -sivustossa .
Ennen kuin jatkat, sinun on ymmärrettävä Weebly -navigointivalikon perusrakenne. Napsauta hiiren kakkospainikkeella julkaistun sivustosi valikkoa ja avaa kehittäjäkonsoli selaimessasi valitsemalla Tarkasta tai Tarkasta elementti. Kun siirrät hiiren jokaisen ylätason navigointivalikon päälle, näet vastaavat CSS -luokat. Jokainen ylätason navigointivalikko on tunnistettu CSS-luokalla, kuten ".wsite-nav-1", ".wsite-nav-2", ". Wsite-nav-3" jne. Jossa 1 on yleensä Hoe-sivu .
CSS -luokan etsiminen Weebly Top Navigation -valikolle
Numerot voivat muuttua teemasi mukaan ja merkitä ylös navigointivalikon CSS -luokka, jonka haluat estää napsauttamasta. Oletetaan, että haluat, että toinen navigointivalikko ei ole napsautettavissa ja vastaava CSS-luokka on ".wsite-nav-2".
Siirry nyt Weebly -koodieditoriin kohdassa "Teema> Muokkaa HTML / CSS> Omaisuus> main_style.css" ja lisää seuraava CSS -koodi.
.wsite-nav-2 {
pointer-events: none;
}Tallenna muutokset ja julkaise sivustosi, niin näet, että toinen ylhäällä oleva navigointivalikko ei ole napsautettavissa eikä kohdistin muutu osoittimeksi. Jos haluat siirtää kohdistimen käteen, mutta valikon ei silti pitäisi olla napsautettavissa, vaihda yllä oleva koodi seuraavasti:
.wsite-nav-2 a:active {
pointer-events: none;
}Samoin voit tehdä kaikista ylätason navigointivalikoista ei napsautettavia lisäämällä vastaavat CSS -luokat.
Weeblyllä on erilainen navigointirakenne mobiilisivustoilla, ja ylävalikon napsauttaminen tuo jälleen esiin luettelon valikoista, mukaan lukien päävalikko. Tämä mahdollistaa ylävalikkolinkin avaamisen, jos siinä on sisältöä, mutta meidän tapauksessamme meidän pitäisi poistaa tämä linkki luettelosta. Lisää siis seuraava CSS "main.less" -tiedostoosi:
.wsite-menu-master-item {
display: none !important;
}Kun olet lisännyt kaikki CSS -koodit, se voi näyttää seuraavanlaiselta:
CSS: n muokkaaminen Weeblyssä
Tallenna muutokset ja julkaise sivustosi.
- Piilota suosituimmat navigointisivut hakukoneilta, mikä estää hakukoneita indeksoimasta tyhjiä sivuja. Voit tehdä tämän valitsemalla valinnan Piilota tämä sivu hakukoneilta kunkin ylätason sivun Lisäasetukset -kohdassa.
- Muista, että käyttäjät voivat edelleen käyttää sivuja syöttämällä URL -osoitteen suoraan selaimen osoiteriville. Ihannetapauksessa 301 -uudelleenohjausten asettaminen ratkaisisi tämän ongelman, valitettavasti Weebly ei salli uudelleenohjausten asettamista live -sivuille. Siksi et voi estää käyttäjiä pääsemästä sivuille osoitepalkin kautta.