CSS tree-like directory tutorial _css/html

Source: Internet
Author: User
This article details how to use CSS to easily control the object's "display" and "Hide" attribute principle, make a tree-like directory, using CSS to make such a tree-like directory, the method is simple, the code is relatively small, so write it out to the net friends, so that when needed can also do a hands-on.

Soyi e-magazine mostly uses a tree-like directory, when the mouse click on the main directory, expand Subdirectories, when you click the home directory again, the sub-directory is closed. It seems simple and concise.

There are many ways to make this kind of tree, and I've been looking at the following example: When using the mouse to click on the main directory, then pull out the corresponding sub-directory, then click, and restore the original, the effect of Soyi Electronic magazine in the catalogue effect is exactly the same.


Production method:
I will first copy the code that produces this effect as follows, and then combine the code to tell the production method:
〈div id= "main1" style= "Color:blue" onclick= "document.all.child1.style.display= (Document.all.child1.style.display = = ' None ')? "': ' None '"
+ Home Directory 1〈/div〉
〈div id= "Child1" style= "Display:none"
〈a href= "#" 〉-subdirectory 1〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 2〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 3〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 4〈/a〉
〈/div〉
〈div id= "main2" style= "Color:blue" onclick= "document.all.child2.style.display= (Document.all.child2.style.display = = ' None ')? "': ' None '"
+ Home Directory 2〈/div〉
〈div id= "child2" style= "Display:none"
〈a href= "#" 〉-subdirectory 1〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 2〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 3〈/a〉
〈/div〉
Note: "" means a character spaces lattice
1, first define two Div, one for the main directory, named: Main1; the other is used for the corresponding subdirectory, named: Child1. 2, write "+ home directory 1" in Main1 Div, and load a mouse click event on it: OnClick and a small snippet of JavaScript program: document.all.child1.style.display= ( Document.all.child1.style.display = = ' None ')? ': ' None '. The purpose of this program is that when the mouse clicks on the main1 div (that is, on the "+ Home Directory 1"), if the child1 div is hidden, let it be displayed, and if so, let it be hidden.
3, in the Child1 div to write a subdirectory, and set it as a hyperlink, I in the above example is set up an empty link, actually make it into a real link, so that it points to the link target. Add a css:style= "Display:none" to the DIV definition in child1, which is intended to keep the subdirectory hidden when it starts.
Other catalogs are just repeating the three steps above. Press F12 to see the effect. The main use of this method is the CSS Display properties: Display, it has a feature is that when the object is hidden, the object occupied by the page space will automatically let out. We know that CSS also has a property: Visibility also has the ability to display and hide objects, but it cannot be used to make the tree-like directories above. Since visibility hides the object, the space occupied by the object is not released, that is, when the subdirectory is hidden, the location of the subdirectory is just a blank space and the location is not allowed, so the other home directory cannot be close. So it can only be used where the position of the page element needs to be fixed.
  • 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.