Welcome!
登入
註冊
美寶首頁
美寶百科
美寶論壇
美寶落格
美寶地圖
首頁
>
學涯 / Cultivation Career
>
學門 Academy
>
程式設計
Advanced
程式設計
作者:
主旨:
Tags:
Message:
HP Wrote: ------------------------------------------------------- > Building An Expanding DHTML Menu With CSS and > JavaScrip > > By Joseph De Araujo > > 文章原始出處: > > http://www.interspire.com/content/articles/10/1/Bu > ilding-An-Expanding-DHTML-Menu-With-CSS-and-JavaSc > ript > > Introduction > Today I am going to show you the different parts > that make up a dropdown vertical menu for your > website. This is not like your normal dropdown > menu, which appears at the top of your content, > however -- these menus expand and remain visible > until they are collapsed with the click of a > mouse. The menu content actually expands with your > page content, pushing the rest of whatever is > below it down - so it can actually be used for > more than just a menu (I might explore that a > little later in another tutorial). > > For now, let's get it started... > > > What does the finished menu look like and how does > it function? > > > Here's a snapshot of what the menu looks like all > coded up. > > When you click on one of the links ie. Menu 1, > Menu 2, Menu 3, Menu 4, Menu 5, this will expand > or contract the submenu for that menu item. > Basically, the end user must have JavaScript > enabled to allow the submenus to work. > > Let's build the menu html > First I'm going to start with the 5 menus items. > Here's the code that I'm using, which is very > simple; 5 hyperlinks. I will need to apply a style > to these level one links, so I will make a class > style called "menu1". > > Menu 1 > Menu 2 > Menu 3 > Menu 4 > Menu 5 > > Now I will create the menu1 class style and put it > in the head of my document. So far we haven't done > anying revolutionary. I won't explain the style > that I've applied here because it's pretty > straight forward - it's just a background image > and the display:block makes it display like a > rectangle. > > > .menu1{ > background-image:url(images/menudiv1bg.gif); > margin-left:25px; > padding-left:20px; > padding-top:2px; > padding-bottom: 2px; > display:block; > text-decoration: none; > color: #000000; > height: 20px; > } > > > Now I'll add the sub menus in place exactly where > they will appear. In this part, we will use some > small tricks to setup the alignment. Firstly, > we'll wrap the whole submenu in a div that has a > unique id for each menu. You can choose your own > names for the div tags, but the main purpose of > the div having a unique id is so that JavaScript > can target that div specifically and make it > appear or disappear. I also add a class style > called 'hide' so that I can choose to hide all of > the submenus from within my style sheet. The links > are then listed within the div just like the main > menu items and are given a submenu class style, to > allow me to control the look of those in my style > sheet as well: > > Menu 1 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 2 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 3 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 4 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 5 > > Link One here > Link Two here > Link Three here > Link Four here > > > I'll add the submenu and the 'hide' style to my > style sheet now: > > .submenu{ > background-image: url(images/submenu.gif); > display: block; > height: 19px; > margin-left: 38px; > padding-top: 2px; > padding-left: 7px; > color: #333333; > } > > .hide{ > display: none; > } > > I'll also create the style that will show the > hidden div tags (submenus): > > .show{ > display: block; > } > > Creating the JavaScript > If you're not too familiar with JavaScript or are > in a rush, feel free to just copy and paste the > code shown below into your page header as is. > There are no further tricky parts to setup as the > JavaScript simply compares the current state of > the chosen submenu and then swaps it, meaning that > if it's hidden, then it will be made visible, and > vice versa. > > Here's the code: > > > <!-- > menu_status = new Array(); > > function showHide(theid){ > if (document.getElementById) { > var switch_id = > document.getElementById(theid); > > if(menu_status != 'show') { > switch_id.className = 'show'; > menu_status = 'show'; > }else{ > switch_id.className = 'hide'; > menu_status = 'hide'; > } > } > } > > //--> > > > Place this code in the part of your web page. > Next, I'm inserting the onClick event to the main > menu links to call the showHide function when you > click on the link: > > Menu 1 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 2 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 3 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 4 > > Link One here > Link Two here > Link Three here > Link Four here > > Menu 5 > > Link One here > Link Two here > Link Three here > Link Four here > > > Some Geek Speak, for those who just want to know > what's happening in the code. > Ok. What's happening here is that when the page > loads, the JavaScript and CSS styles in the head > will load first and then your menu links will > appear in the body of the page. JavaScript is > loaded from top to bottom by the browser, so let's > read from inside the script tags: > The menu_status = new Array(); line will create a > container ready to store the current state of your > menu. This corresponds to the sections of the code > that actually say what this menu_status now > equals. eg. menu_status = 'show'; and menu_status > = 'hide'; > > There's a function called showHide(theid) but this > won't do anything unless it is called from within > your HTML code. 'theid' is the id of the menu > being shown or hidden, and it's called during the > onClick even of that menu, such as > onclick="showHide('mymenu5')". > > Ok, so the function loads ready to be used, but > the page continues to load... > > Your main links and submenus load, but only the > main links show because the 'hide' style that's > applied to the submenus will hide the submenus. > The submenus have in fact loaded already, they > just aren't showing just yet. > > If you click on a main menu link, then here's what > happens: > > > The onClick event will fire up the showHide > function and JavaScript will know which object we > are working with by the id of the link. > JavaScript will get the menu element in question > by the id that's passed to the function > JavaScript now has to check whether the current > menu_status is visible or not, and then swap it. > If it's not 'show' eg. if(menu_status != 'show') > then the status_id will be made to equal 'show'. > If it's not hide, eg. if(menu_status != 'hide') > then it will be made to equal 'hide'. > > Conclusion > In this article I've shown you how to build a > basic vertical drop down menu using DHTML and > JavaScript. This is a groovy little script that > will allow you to create a nice menu, or even save > you some space if you currently have multi level > menus laid out on your site. You can probably do > more with this script if you're familiar with > JavaScript or don't mind experimenting, but we'll > leave it at that for now!