Left menu
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head> <title>Title</title> <style>. Hide{Display:None; }. menu. Head{Height:38px;Background-color:#2459a2;Line-height:38px; } </style></Head><Body><Divstyle= "HEIGHT:48PX; border:1px solid Red"></Div><Divstyle= "width:300px; border:1px solid Red"> <Divclass= "Menu"> <DivID= ' A1 'class= "Head"onclick= "Caidan (' A1 ')">Menu 1</Div> <Divclass= "Conent"> <DivClas= "Item">Content 1</Div> <DivClas= "Item">Content 1</Div> <DivClas= "Item">Content 1</Div> </Div> </Div> <Divclass= "Menu"> <DivID= ' A2 'class= "Head"onclick= "Caidan (' A2 ')">Menu 2</Div> <Divclass= "Conent Hide"> <DivClas= "Item">Content 2</Div> <DivClas= "Item">Content 2</Div> <DivClas= "Item">Content 2</Div> </Div> </Div> <Divclass= "Menu"> <DivID= ' A3 'class= "Head"onclick= "Caidan (' A3 ')">Menu 3</Div> <Divclass= "Conent Hide"> <DivClas= "Item">Content 3</Div> <DivClas= "Item">Content 3</Div> <DivClas= "Item">Content 3</Div> </Div> </Div> <Divclass= "Menu"> <DivID= ' A4 'class= "Head"onclick= "Caidan (' A4 ')">Menu 4</Div> <Divclass= "Conent Hide"> <DivClas= "Item">Content 4</Div> <DivClas= "Item">Content 4</Div> <DivClas= "Item">Content 4</Div> </Div> </Div></Div><Script> functionCaidan (NOD) {varHead=document.getElementById (NOD); Curr_meu=Head.parentElement.parentElement.children; for (varI=0; I<curr_meu.length; I++){ varitem_list=Curr_meu[i]; item_list.children[1].classlist.add ('Hide'); } head.nextElementSibling.classList.remove ('Hide') }</Script></Body></HTML>left menu
Python:html+css (left menu)