Tạo popup menu không cần JavaSript

Bài viết này sẽ kết hợp giữa CSS với DreamWeaver 8 để làm một cái menu xổ ngang màn hình mỗi khi dichuột qua.Hiệu ứng này bạn có thể thấy ở những trang web chuyên nghiệp.Để làm được nó bạn phải cókiến thức về JavaScript kha khá.Nhưng trong khuôn khổ bài viết này mình sẽ hướng dẫn các bạn làmđúng như thế mà không cần biết 1 tý gì về javascript vì ta hoàn toàn dùng công cụ trong Dreamweaver 8....
Nội dung trích xuất từ tài liệu:
Tạo popup menu không cần JavaSriptTácgiả:KhắcNamsoftnd.comChàocácbạn!.HômnaymìnhsẽtiếptụcloạtbàiỨngdụngCSSchothiếtkếwebđểbạncóthểhiểuđượcCSSquantrongnhưthếnàotrongthiếtkếvàlậptrìnhweb.BàiviếtnàysẽkếthợpgiữaCSSvớiDreamWeaver8đểlàmmộtcáimenuxổngangmànhìnhmỗikhidichuộtqua.Hiệuứngnàybạncóthểthấyởnhữngtrangwebchuyênnghiệp.ĐểlàmđượcnóbạnphảicókiếnthứcvềJavaScriptkhakhá.Nhưngtrongkhuônkhổbàiviếtnàymìnhsẽhướngdẫncácbạnlàmđúngnhưthếmàkhôngcầnbiết1týgìvềjavascriptvìtahoàntoàndùngcôngcụtrongDreamweaver8.MờicácbạnxemtrướckếtquảPhần1Đượcrồi,tabắttayvàolàmthôi.Đầutiênbạntạomới1trangwebtrongDreamweaver8,tạomớixongbạnsavevàoluônnha.Bướcthứ1,mởcodecủatrangđólên,thêmđoạnmãCSSnàyvào(hoặcbạncóthểgõbằngnotepadrồisavelạivớiđuôi.css,rồichènvàotrangbạnmuónlàmmenuxổngang,đoạncodeđónhưsau)CodecụthểnhưsauQuote:#menu{width:170px;background:#000;}#menua{height:25px;bordertop:#2727271pxsolid;textindent:20px;paddingtop:2px;textdecoration:none;color:#FFF;display:block;}#menua:hover{bordertop:#4848481pxsolid;}Tiếptheoởphầnbodybạngánthẻcóid=menu.ĐểmìnhđưasourcecodecủacảphầnnàyrađểcácbạndễhìnhdungnhaQuote:UntitledDocument#menu{width:170px;background:#000;}#menua{height:25px;bordertop:#2727271pxsolid;textindent:20px;paddingtop:2px;textdecoration:none;color:#FFF;display:block;}#menua:hover{bordertop:#4848481pxsolid;}HomeProductsDownloadsSupportXongphầnnàycácbạnsẽđượcnhưhìnhsauPhần2:Thiếtkếphầnxổra,trênthanhmenucủaDreamWeaverbạnchọnWindow>BehaviorshoặcnhấnShift+F4.CửasổBehaviorshiệnranhưsauQuaylaivớiphầntamenuđangthiếtkếcủata.Bạnhãychọnphầnmuốnxổra(ởđâylàthẻ).Chọnnhưhình Hìnhảnhnàyđãđượcthunhỏlại.Hãyclickvàođâyđểxemhìnhgốc.Kíchthướccủahìnhgốclà935x577,dunglượng44KB.Tiếptheocửasổshowpoupmenuhiệnra.Nếuhiệnra1thôngbáobạnhãynhấnOKrồitiếptheocửasổnhưbêndướihiệnra.Đểthêmtrangkhixổrabạnchọndấu+.muốngiảmđichọndấutrừVẫntiếptụcởcửasổnày,taquatabthứ2Appererance.Hãycứchọnnhưhình,khoanthắcmắcTabAdvancedcũngchọnnhưhìnhXongbướcnàytađượcnhưsauTuynhiênnhưthếnàykhálàxấuvàhiểnthịchưarõràng.ChúngtacầnthayđổivịtríhiểnthịcủanónhưsauTasửađổithuộctínhhiểnthịcủamenusổrabằngcáchthêmvàonhưhìnhtrên,xongbướcnàythìtađãthànhcông8/10rùiđó.XemhìnhminhhọaNhưngthếnàythìvẫnchưađẹplắm.Giảsửchúngtamuốnthayđổimàubêntrongvàthuộctínhđườngviềncủanóthìsao.Trongcửasổshowpopupmenubạnhãychọnqualạigiữa2tabApprancevàAdvancedđểthayđổimàucũngnhưđườngviềnnhé.(phầnnàybạntựlàmchonhớ).Chúý1điềulànếulàmsai,lỡbấmokrồithìbạnvẫncóthểsửalạibằngcáchtừcửasổBehavioursbạnnhìnthấybêndướidấu+là2dòngchữ,cóchữshowpupupvahidepopupgìđó.Bạnchọndòngthứ2clickchuộtphải>edit>cửasổshowpopupmenulạihiệnra.BạnlạicóthểchỉnhsửalạitheoýmìnhĐâylàkếtquảcuốicùngcủamìnhsaukhithêmchútmắmmuốiCácbạncóthểxemdemoởđâyhttp://users2.titanichost.com/khacnam47/postbai/bai2/demo_drop.htmlTácgiả:KhắcNamsoftnd.comcopynhớghitêntácgiảcácbạncứlàm,cógìkhônghiểuthìhỏimình ...