whycomputer.com >> Počítačová školení >  >> Software

Jak vytvořit rozevírací nabídku HTML a Submenu

Rozevírací nabídky - také známé jako nabídky "suckerfish" - používají kombinaci HTML a CSS (Cascading Style Sheets) pro strukturu a styl. Část HTML rozevírací nabídky obsahuje seznamy odrážek a vnořené seznamy odrážek. Po úpravě panelu nabídek a hlavních navigačních odkazů v CSS můžete stylem vnořených seznamů odrážek označit podnabídky. Selektor ": hover" v CSS umožňuje změnit skrytou vlastnost zobrazení podnabídky tak, aby se znovu zobrazovala.

Krok 1
Kódujte nabídku v HTML pomocí "
"a"

  • "tagy:
  • Odkaz 1
  • Odkaz 2
  • Odkaz 3

    Přidání příkazu clear-fix div do konce seznamu. Přidáte styl do třídy "clearfix", aby se pozadí menu natáhlo dolů.

    Krok 2
    Přidejte podnabídku jako nový neuspořádaný seznam vnořený do značek "

  • " nadřazeného odkazu:
  • Odkaz 1
  • Odkaz 2
  • Odkaz 1
  • Odkaz 2
  • Odkaz 3

  • Odkaz 3


    Krok 3
    Otevřete svůj seznam stylů a upravte nabídku pomocí CSS. Odebrat odrážky i levou odrážku: #menu {seznam-styl: žádný; výplň: 0; } Všimněte si, že "#menu" odpovídá jménu ID příkladu kódu HTML.

    Krok 4
    Přidejte barvu pozadí do panelu nabídek: #menu {seznam-styl: žádný; výplň: 0; barva pozadí: tmavě modrá; }

    Krok 5
    Přepněte položky nabídky doleva, aby se vodorovně zarovnaly na panelu nabídek: #menu li {float: left; }

    Krok 6
    Stylujte odkazy, které tvoří položky nabídky. Přidejte odkazy na odkazy, které budou svisle zarovnány na liště nabídek a zároveň budou snazší na ně kliknout a přesunout se na ně. Musíte změnit vlastnost "display" na "block", chcete-li přidat odkazy na odkazy: #menu li a {display: block; polstrování: 8px 15px; zarovnání textu: střed; barva bílá; font-weight: tučné; text-decoration: žádný; } Všimněte si, že v "padding" byly nastaveny dvě hodnoty. První hodnota je vertikální polstrování, zatímco druhé efekty horizontální polstrování.

    Krok 7
    Styl podnabídky a jejích položek. Nejprve je nutné umístit podnabídku. Odstraňte odrážky a výplně z podnabídek také: #menu ul {position: absolute; styl seznamu: žádný; výplň: 0; }

    Krok 8
    Odstraňte levé položky z položek v podnabídkách: #menu ul li {clear: left; }

    Krok 9
    Přidejte pravidlo "dsiplay: none" do pravidla "#menu ul", chcete-li vypnout podnabídku, protože nechcete, aby se zobrazovala, pokud se uživatel nepřepne nad nadřazenou položku. Znovu vytvořte nabídku pomocí tohoto kódu: #menu li: hover ul {dipslay: block; }
    Přidejte pravidlo "clear fix" do vašeho div: .clearfix {clear: both; }

    Tipy
    Přidání zvýraznění do položek nabídky, když nad nimi uživatel přejde. Pravidlo stylu pro změnu barvy pozadí odkazovaného vzhůru vypadá jako "#menu a: hover {}".
    Jakmile dokončíte sestavení menu pomocí HTML a CSS, můžete přidat plugin jQuery, abyste vytvořili pěkné animace pro rozevírací seznamy.


    URL:https://cs.whycomputer.com/Software/100107813.html

  • Software
    • Jak vytvořit a upravit tabulky v aplikaci Microsoft Word

      Aplikace Microsoft Word usnadňuje uspořádání informací ve sloupcích a řádcích pomocí tabulky. Tabulky usnadňují čtení dat. Symetrii můžete také vytvořit v dokumentu vytvořením tabulky pro zobrazení textu v určité oblasti na stránce. Poté, co jste vytvořili tabulku, upravte ji změnou barvy buňky, tlo

    • Jak vytvořit nabídku v aplikaci Microsoft Publisher

      Aplikace Microsoft Publisher je aplikace sady Office, která se nezdá být tak populární jako její sourozenec Word. Vydavatel vám však může pomoci vytvořit publikace, na které byste se mohli pochlubit. Pokud máte pocit, že vydavatel vydává strach, zkuste tento projekt. Můžete si vytvořit menu pro vaši

    Počítačová školení © https://cs.whycomputer.com