Isa sa pinakamahalagang aspeto ng pag-unlad ng website at software ay ang paglikha ng menu. Ang isang magandang sliding menu ay nananatiling isang benchmark para sa maraming mga may-ari ng website at programmer. Maaari itong magawa gamit ang mga tool ng CSS at Expression Web.
Panuto
Hakbang 1
Buksan ang Expression Web at pumunta sa Pamahalaan ang Estilo upang simulang lumikha ng isang sliding menu at pindutin ang key ng Bagong Estilo. Pangalanan ang bagong istilong Selector ul li. Tiyaking ang nabuong file ay may extension na drop-down.css. Upang lumikha ng isang sliding menu, tukuyin ang naaangkop na posisyon sa screen. Tukuyin ang lapad ng bawat isa sa mga item sa menu at alisin ang hindi kinakailangang mga tuldok na maaaring nasa harap nila.
Hakbang 2
Patakbuhin ang pagpipiliang Layout at itakda ang katangian ng Display. Bigyan ito ng naaangkop na halaga ng Inline upang ihanay sa screen. Itakda ang Float na katangian sa Kaliwa at pindutin ang Ilapat ang key. Itakda ang lahat ng mga elemento ng listahan sa isang linya. Upang mapanatili ang mga ito sa isang maayos na pagkakasunud-sunod at hindi magkakapatong, itakda ang katangiang Lapad sa Posisyon sa anyo ng 150 px. Siguraduhin na ang lahat ng mga item sa listahan ay pareho ang laki. Alisin ang mga tuldok sa harap ng bawat elemento sa pamamagitan ng pagpunta sa katangian ng Listahan at pagtatakda sa Listahan-uri ng uri sa Wala. I-click ang "OK" upang tanggapin ang mga pagbabago at magkabisa.
Hakbang 3
Ayusin ang estilo at laki ng font para sa ul li. Pumunta sa Pamahalaan ang Mga Estilo at i-right click sa ul li, piliin ang Modify Style. Makikita mo ang pamilyar na menu ng dialog. Pumunta sa Font, piliin ang Font-family at itakda ang katangiang ito sa Helvetica, Arial, Sans-serif. Ayusin ang laki ng font at itakda ito sa 0, 9. Itakda ang katangiang Text-transform sa Uppercase. Sa katangian ng Taas - Posisyon, tukuyin ang eksaktong taas ng mga item sa menu sa pamamagitan ng pagtatakda ng halaga sa 30 px.
Hakbang 4
I-save ang file bilang menu.html kapag nakumpleto ang lahat ng mga pagkilos na nagwawasto. Subukan ang menu na iyong nilikha lamang sa iba't ibang mga application at browser upang makita kung ito ay gumagana. Tulad ng nakikita mo, hindi mahirap lumikha ng ganitong menu.
