Use CSS to create a drawer menu _ Experience Exchange

Source: Internet
Author: User
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> & Lt;title> advertising </title> <meta http-equiv= "Content-type content=" text/html; Charset=utf-8 "/> <meta name=" title "content=" "/> <meta name=" Author "Conte" Nt= ""/> <meta name= "subject" content= ""/> <meta name= "language" content= "E N "/> <meta name=" keywords "content=" "/> <style type=" Text/css "> #leftside {Floa T:left; Background-color: #00468C; width:150px; margin:0 Auto; Text-align:center; padding:10px 0;} #leftside. Show_about p.about{Display:block;} #leftside. Meta p.meta{display:block; #leftside. Ads p.ads{Display:block; #leftside a{Display:block;} #leftside a{text-dEcoration:none; Color:black;} #leftside a:hover{background: #FFD7EB URL (images/common/bb_url.gif) no-repeat 10px Center; #leftside. Class1 a:hover{background: #FFD7EB URL (images/common/bb_url.gif) no-repeat 10px Center; p.top{background-color: #F9E006; line-height:2;} p.normal{background: #8CC6FF URL (images/common/bb_url.gif) no-repeat 10px Center; margin:10px; font:16px/1.5 song Body;} p.about,p.meta,p.ads{Display:none;} . class1{Display:block margin:10px 20px; background: #fff URL (images/common/bb_url.gif) no-repeat 10px Center; font : 14px/1.5 song Body;} </style> <script language= "JavaScript" type= "Text/javascript" > <!--shq={}; Shq.$=function (o) {return typeof (o) = = ' String ' document.getElementById (o): o}//--> </script&gt ; </pead> <body onload= "" > <div id= "leftside" > <p Class= "Top" > </p> <p class= "normal" > Home </p> <p class= "normal" onclick= "shq.$ (' Leftside '). classname=shq.$ (' Leftside '). classname== '? ' Show_about ': ' > About Xuan Guang </p> <!--Xuan Guang--> <p class= "about Class1" > Company Introduction </p> <p class= "about Class1" > Xuan Guang structure </p> <p class= "about class 1 "> Xuan Guang Advantage </p> <p class=" about Class1 "> Propaganda process </p> <p class=" Abo UT Class1 "> Xuan Guang Honor </p> <p class=" about Class1 "> Propaganda team </p> <p CL ass= "about Class1" > Cultural exchange </p> <!--Xuan Guang--> <p class= "normal" > Company news </p&gt ; <p class= "normal" > Service project </p> <p class= "normal" onclick= "shq.$" (' Leftside '). classname=shq.$ (' Leftsi De '). classname== '? ' Meta ': ' > Publicity Media </p> <!--media--> <p class= "meta Class1" > Exclusive Media </p> <p class= "meta Class1" > its It media </p> <p class= "meta Class1" > Quick bus Download </p> <p class= "meta Class1 "> Outdoor release </p> <!--media--> <p class=" normal "onclick=" shq.$ (' leftside ' ). classname=shq.$ (' Leftside '). classname== '? ' Ads ': ' > Successful customers </p> <!--customer--> <p class= "ads Class1" > Customer Logos </p > <p class= "ads Class1" > Successful case </p> <!--customer--> <p class= "Normal" > Recruitment </p> <p class= "normal" > Contact us </p> </div> <div id= "right" > </div> </body&gt ; </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.