Skep `n aftreklys met HTML en CSS

Gee elke afdeling `n klas eienskap. Ons sal later die klasattribuut gebruik om die styl van hierdie elemente met CSS aan te pas. Gee beide die houer en die spyskaart sy eie klas eienskap.

Voeg `n lys van spyskaartitems by. Die ongeordende lys (

) bevat die items in die hoofkieslys (lysitems

Voeg skakels by. As hierdie boonste spyskaartitems ook na hul eie bladsye skakel, kan u die skakels nou invoeg. Skakel na `n nie-bestaande anker (soos "#!"), selfs al skakel hulle nie oral nie, sodat die gebruiker se wyser anders sal lyk. In hierdie voorbeeld lei Kontak nie tot niks nie, maar die ander twee spyskaartitems doen:

Skep sublyste vir die aftrek-items. Nadat die styl geskep is, vorm hierdie lyste die aftrekkieslys. Plaas die lys in die lysitem waar die gebruiker sy muis beweeg. Voeg `n klasattribuut en `n skakel by, net soos voorheen.

Voeg clearfix kode by. Onthou jy die "clearfix"-klas bygevoeg aan die spyskaartlys? Gewoonlik het die elemente van die keuselys `n deursigtige agtergrond, waardeur ander elemente verskuif kan word. `N eenvoudige aanpassing aan die CSS kan hierdie probleem oplos. Hier is `n goeie, vinnige oplossing, alhoewel dit nie in Internet Explorer 7 en vroeër werk nie:

Skep die basiese ontwerp. Met hierdie kode kan jy jou spyskaart bo-aan die bladsy plaas, en jy verberg die aftrekelemente. Dit is doelbewus baie nuwer sodat ons op die betrokke kode kan fokus. U kan dit later aanpas met ekstra CSS-kode, soos opvulling en marge.

Drop die afrol-items wanneer jy jou muis oor hulle beweeg. Die elemente in die aftreklys is nou ingestel sodat dit nie gewys word nie. Hier is hoe om `n volledige sublys te maak sodra jy die "parent" beweeg:

Gebruik `n pyltjie om aan te dui dat daar `n aftrekkieslys is. Webontwerpers wys gewoonlik met `n pyl afwaarts dat `n element `n aftreklys oopmaak. Hierdie kode voeg die pyltjie by elke element in u spyskaart toe: