The tree view of HTML lists is the best option visual overview and study of their hierarchical structure. Let's look at several transformations of a regular HTML list into a more visual tree-like state using the magic of CSS styles.
1. Example of a regular HTML list- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
Let's assign a tag
- treeline class to create connecting lines for each section of the list.
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- Main menu
- +Knowledge base /* List expansion block */
- Components
- Plugins
- Modules
- Reviews
- Contacts
- +Knowledge base /* List expansion block */
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- Main menu
- Knowledge base
- Components
- Plugins
- Modules
- Reviews
- Contacts
- Knowledge base
- a nested list is added
- or .
- Google Plus
- In contact with
- RSS
To position the submenu relative to the main menu, the following styles are declared:
— for a list element in which a drop-down list is nested: li (position: relative;) ;
— for the drop-down menu ul (position: absolute;) , as well as the left and top values.For clarity and ease of formatting, let’s add the class topmenu to the main menu and submenu to the drop-down menu.
There are several ways to hide a drop-down menu:
Method 1. (display: none;)
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) using the jQuery library.The dropdown menu is hidden using .submenu (display: none;) , on hover it is shown using .topmenu li:hover .submenu (display: block;) .
Method 2. (visibility: hidden;)The menu is hidden using .submenu (visibility: hidden;) , and shown using .topmenu li:hover .submenu (visibility: visible;) .
Method 3. (opacity: 0;)The menu is hidden using .submenu (opacity: 0;) and shown using .topmenu li:hover .submenu (opacity: 1;) . To prevent the menu from appearing when you hover over the area where it is located, add visibility: hidden; , and when hovering, change it to visibility: visible; .
Method 4. (transform: scaleY(0);)The menu is hidden using .submenu (transform: scaleY(0);) and shown using .topmenu li:hover .submenu (transform: scaleY(1);) . Since the default element transformation occurs from the center, you need to add for .submenu (transform-origin: 0 0;) , i.e. from the top left corner.
Method 5: Using jQuery $(".five li ul").hide(); // hide the drop-down menu $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300);) /* select a list element that contains an element with the .submenu class and add a hover function to it that shows and hides the drop-down menu */); 2. 3D drop down menuInteresting effects can be created using CSS3 transformations, for example, making a menu appear from the depths of the screen.
* ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : none; margin: 0; padding: 0; ) nav a ( display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; ) .topmenu ( backface-visibility: hidden; background : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; ) .down:after ( content: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .topmenu li a:hover ( color: #E6855F; ) .submenu ( background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index : 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; ) .topmenu > li:hover .submenu( visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); ) .submenu li a ( color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; ) 3. Expandable drop-down menu with logoIn this example, the top section of the page contains the logo and site navigation. The logo can be a picture or text. The dropdown menu gradually expands from underneath the top list item using the CSS3 transform function.
Logo
* ( box-sizing: border-box; ) body ( margin: 0; background: #f2f2f2; ) header ( background: white; text-align: center; ) header a ( text-decoration: none; outline: none; display : block; transition: .3s ease-in-out; ) .logo ( color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; ) nav ( display: table; margin: 0 auto; ) nav ul ( list-style: none; margin: 0; padding: 0; ) .topmenu:after ( content: ""; display: table; clear: both; ) .topmenu > li ( width: 25%; float: left; position: relative; font-family: "Open Sans", sans-serif; ) .topmenu > li > a ( text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; ) .topmenu li a:hover ( color: #D5B45B; ) .submenu-link:after ( content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; ) .submenu ( background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0) ; transform-origin: 0 0; transition: .5s ease-in-out; ) .submenu a ( color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: none; ) .topmenu > li:hover .submenu ( opacity: 1; transform: scaleY(1); ) 4. Expanding Dropdown MenuAnother example for a dropdown menu. The enlargement effect when the menu appears is realized by reducing the initial size.submenu (transform: scale(.8);) , on hover the size increases to.topmenu > li:hover .submenu (transform: scale(1);) .
* ( box-sizing: border-box; ) body ( margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( background: white; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); ) .topmenu > li:last-child:after ( background: none; box -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( color: #c0a97a; ) .submenu ( position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa ; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( visibility: visible; opacity: 1; transform: scale(1); ) 5. Pull-up drop-down menuHorizontal menu with mini-animation: when you hover over the top menu links, a small circle appears, which also accompanies the appearance of the drop-down menu.
@import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; ) body:before ( content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration : none; display: block; color: #222; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( position: relative; padding: 10px 15px; font-family: " Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; ) .topmenu > li > a:before ( content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); opacity: 1; ) .submenu ( position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s ; ) .topmenu > li:hover .submenu ( visibility: visible; opacity: 1; transform: translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; ) .submenu a:hover (background: #e8e8e8;)Very often, when registering or surveying on sites, you are asked to make a choice from a drop-down list. For example, select your country from many other countries. These are all different form elements, and they can be designed in different ways: from simple HTML5 to complex CSS3.
Today we will look at one such example of designing a select field using HTML/CSS and a Font Awesome icon. But we will start, as usual, with document markup.
HTML codeInside the select tag are the options dropdown list items. In turn, the select and form tags are nested in a common div container. The form tag must be present if the data will subsequently be sent to the server.
Red
Blue
Pink
Black
White
We position the container with the box class in the center of the window.
Box(
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
We include the icon font before the closing head tag.
Styling the selectorWe set the dimensions for the selection field - 250x50 pixels and make the fields for the items 10 pixels on all sides.
Box select(
width: 250px;
height: 50px;
padding: 10px;
}Removing the frame and stroke:
Border: none;
outline: none;We register purple background, title, color and font size for lists.
Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;Create a shadow around the field.
Box-shadow: 0 5px 20px rgba(0,0,0,.3);
In general, the select box is ready and working, but it looks boring, and the triangle that you need to hit with the mouse is very small. And if I thought so, then the designer will think the same, we need to prepare in advance for different options.
Most likely, the designer will replace the tiny triangle with an icon from the Font Awesome font.
It looks much nicer this way, but the code still needs to be written by a layout designer. What could be the solution here? We will not touch the HTML code, but will use the before pseudo-element.
Before pseudo-element for .boxThe first thing to do is to write down the icon code and the name of the font "Font Awesome 5 Free". We select the desired icon on the website fontawesome.com, indicating “selection” and copy its code.
.box::before (
content: "\f150";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
background: #da00e0;
pointer-events: none;
}Next we position absolutely, indicate the dimensions 50x50, White color The icon has a light purple background. We set a very important property pointer-events: none . This means that the before pseudo-element is not a mouse event object, and the value none tells the "mouse selection" event to go down to the bottom layer and access the element underneath it - that little triangle. The triangle hasn't disappeared, it's just under the before pseudo-element, serving only as decoration. By clicking on the beautiful icon, the “ugly” triangle actually works and we make our choice.
Hello, dear readers of the blog site. As part of our study of intricacies, as the next task, we will continue to analyze the details of creating forms on the site using the appropriate ones.
Today we will look at how to create drop-down (drop-down) lists, including multiple choice, using select and option, how to construct a text field using textarea, and also talk about the possibility of expanding the functionality of forms by using fieldset, label and legend tags.
Let me remind you that any form present on the page is created using and is intended to enter any information from the user and send it to the server (example - ).
Unfortunately, hypertext markup language tools do not allow you to directly process this information, so using HTML we only create appearance forms, and the necessary data is sent for processing. For this purpose, a special file is purposefully created on the web server, written in one of the server languages (most often, PHP). Let's say for feedback you can create a mail.php file, which will be the handler.
When using the information obtained in this publication in practice, do not forget about how it should look, where the codes of all visible page elements, including forms, are always located within the body tag.
This information is extremely necessary, because even if you use all the modern developer tools built into them (let me remind you, the first sign in the implementation of this functionality was), you must clearly understand the mechanism for using the main tags, then editing the HTML code, the need for which arises from time to time, will turn into a pleasant activity.
2. Multiple - this attribute, which has no parameters, allows multiple selection, unlike the above example, where you can select only one element (line). Try to select several lines in this list with the mouse at once (one at a time in any place, holding down the Ctrl key, or using Shift, following in a row one after another):
Option Textarea Label Fieldset Legend
3. Size - sets the height of the drop-down list, that is, the number of lines displayed. If the multiple attribute is present and the size value is not specified (as in the example above), then by default four lines are displayed, and, for example, with size="5" five will be visible:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
4. Required (has no parameters) - determines that a selection must be made before sending data to the processor. If an element from the list is not selected, then the form data will not be sent:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
5. Autofocus (does not matter) - sets focus to the list immediately after the page loads. In addition, if the user is accustomed to performing most of the actions using keys, then just such a pre-configured focus will help make selections from the list using the arrows on the keyboard without any use of the mouse:
Select Option Textarea Label Fieldset Legend from the list
6. Disabled (no parameters) - blocks access to the list (disables it). In practice, it is usually used in conjunction with scripts in cases where you need to enable a drop-down list only when certain conditions are met:
Select Option Textarea Label Fieldset Legend from the list
7. Form - communicates the list with one or more forms to which it belongs, but is located outside the container. In this case, the parameter is written as the value of the form attribute global attribute id which is added to the form tag:
Select Option Textarea Label Fieldset Legend from the list
Select Option Textarea Label Fieldset Legend from the list
Don't confuse the select tag attribute with the main form tag. In the example above, the id="data" attribute was added to the form tag, and form="data" was added to the select tag, which made it possible to associate the drop-down list with a specific form.
Option Tag Attributes1. Value - defines the value from the drop-down list that will be sent to the server (form processor). Actually, the handler is sent a name, which is specified by the name attribute of the select tag, and the value (for this example— 1, 2, 3, 4, 5), corresponding to the selected line of the drop-down list:
Select Option Textarea Label Fieldset Legend from the list
Option Textarea Label Fieldset Legend
2. Disabled - blocks the drop-down list item from being selected.
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
As you can see from the example, the “Option” line is inactive and cannot be selected.
3. Label - displays the text content (which is its value) of a particular list element. If label is present, then a line identical to the value of this attribute is printed and the text content inside the option tag is ignored. The same thing happens if there is no content between them at all.
Tag Textarea Tag Label Tag Fieldset Tag Legend
Tag Textarea Tag Label Tag Fieldset Tag Legend
Look. In the above example, the first line for option in the code is empty (on the left side of the table), but the parameter label="Option Tag" is written, as a result, this particular text appears in the list (on the right side). The second line of code contains the text "Textarea Tag" as the content of the option tag, but the dropdown on the right shows the word "Textarea" to match the value of label="Textarea".
4. Selected - selects the current drop-down list item:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
If the multiple attribute is present, then it is possible to select more than one element:
Attributes of the optgroup tagOption Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
If the drop-down list needs to be sorted somehow, for example, divided into groups, then for each of these groups a container is used, consisting of the opening and closing optgroup tags, which contains part of the drop-down list items. However, there are two attributes for setting up such a drop-down list.
1. Label - sets the name of each group as a parameter:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
The same thing, but with multiple and size="7" of the select tag:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
2. Disabled (no values) - blocks the selection of elements of the group in relation to which it is installed, and inactive items are usually highlighted gray:
Option Textarea Label Fieldset Legend
Option Textarea Label Fieldset Legend
A short video will come in handy here:
Text field in a form using textareaAnother form element for the site that we will consider is a field with the ability to enter multi-line text into it. It can be created using the textarea tag. Without the default attributes, applying this tag will produce the following result:
Enter text:
Enter text:
You can carry out line breaks in the field, and the text will be transmitted to the processor on the server, taking into account the changes made. The field can be stretched in width and length by clicking on the lower right corner, which is marked with two diagonal stripes.
Let's now try to add several attributes with parameters to the original code:
1. Name - defines the name of the text area as a value to identify it after submitting the form data when it is processed on the server.
2. Cols - field width, which is specified as a parameter as a number standing nearby identical symbols placed horizontally. Default value is 20.
3. Rows - the height of the text field, determined by the number of lines. If the number of lines of text entered by the user is greater than the value specified by this attribute, then vertical stripe scroll.
4. Maxlength - indicates the maximum number of characters that can be placed in the text field. If the limit is exceeded, further input will not be possible.
Below is an example with all of the above attributes, the effect of each of which you can check yourself by simply placing the required number of letters and lines in the text area (you can simply enter the same character several times):
Enter text:
Enter text:
5. Minlength - specifies the minimum number of characters that must be entered in the text area. If the user tries to send a text with fewer characters, the browser will display a short message with information that will contain a mention of the need to supplement the content of the form and how many characters have already been entered.
7. Readonly (without parameters) - if you attach this attribute to textarea, the text field will not be editable by users and will be read-only. But you can focus on it (move the cursor to the field and left-click), as well as select and copy (partially or completely) the text:
A few more attributes that implement additional functionality when filling out fields:
8. Autocomplete - indicates whether the browser should provide hints when the user fills out a form based on previously entered data and makes it possible to automatically insert suitable text.
Has only two parameters: on (enabled) and off (disabled). Here's a code example:
Enter text:
This attribute with the value “on” works only when auto-filling of form fields is enabled in the web browser of a particular user.
9. Wrap - sets the browser rules for wrapping lines in the text area using three values:
Soft— a set of characters that does not fit into the field in width is automatically transferred to a new line. In this case, the processor the text will be sent as one line. If the user transfers text in any in the right place using the “Enter” key, then this transfer is saved when submitting the web form.
Enter text:
Enter text:
Hard— hyphens are made automatically if the text does not fit into the field in width, and when sent to the processor, the places of such hyphens will be saved. This option is only used in in conjunction with the cols attribute:
Enter text:
Enter text:
Off— disable line breaks. If you print a text fragment without mechanical transfer using the “Enter” key, then the entire text will be placed on one line, and a horizontal scroll bar will appear:
Enter text:
Enter text:
10. Autofocus (has no parameters) - initiates focusing on the text field when loading the page with the form.
11. Disabled - unlike the readonly attribute (which also prohibits editing the contents of the field, but makes it possible to focus on it), completely blocks access to the text area, which is usually colored in grey colour:
Inactive text field
Today I want to present a small “recipe” for creating a list in CSS. No JQuery, no CSS3 - just good old cross-browser CSS. The example is quite simple, so experienced comrades may not be interested. We will implement a drop-down list with social buttons.
So, let's not talk for a long time, let's get straight to the point
HTML Share this postI deliberately omit general points, like including styles so that the code does not grow. At the bottom of the page I will give a link to the sources - everything is there.
CSS
What we have in HTML is a regular list and an unusual header. Its unusual feature is that it is made with a hyperlink, which allows you to track the :hover event, that is, the hover. The dropdown list will work when you hover over the title.First, let's look at the basic styles of a dropdown list. I tried to comment every line of code to make it clearer:
/*Reset the padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Hover block style*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Title in normal state*/ .droplink h3 a( text-align:center ; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none ) .droplink h3 a img(border:none) /*Style for hover title*/ .droplink:hover h3 a ( color:#FFF; font-weight:bold; position:absolute )
There’s nothing special here; we indicated the size and style of the block, the style of the header, and for both elements, their styles when hovering the cursor. Go ahead:
/*Hide the list without hover*/ .droplink ul( list-style:none; display:none ) /*Display the list on hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( display:block)
This code is more interesting and shows how the drop-down list behaves when hovered over. In normal condition it costs display:none, that is, it is not displayed. When hovered, we show it as a block. That's the whole secret. Now let’s decorate the list elements a little and insert icons:
/*List item style*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Element hover style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
That's all, actually. The drop-down list is ready and looks quite nice. You can design the elements at your discretion, add rounded corners and other bells and whistles.
If you want the list to “overlap” the text below it when hovering, look to the side z-index.
If something is unclear or doesn’t work out, ask in the comments or use the “Send message” button, it’s there ->
- /* Assign class treeline */
We add + to the previous markup to implement the function of expanding the elements of a tree list.
The following styles must be added to the CSS from the previous example:
Treeline .drop ( position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Background and the color of the button that opens the list */ font-size: 78%; /* Size +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; ) .treeline li: last-child > .drop (margin-left: 1px;) .treeline .drop + ul (display: none;) .treeline .dropM + ul (display: block;)
Script implementing dropdown list functionIn addition to HTML and CSS, this method of designing tree lists requires the use of JS:
$(function() ( var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i< ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();
This JS code can be inserted at the end of the material by going to the source code view mode. Please note that the script code may be cut off by the editor and, therefore, not work. In this case, go to the editor settings and allow the use of the tag.
4. Example of a vertical tree list- /* Assign class treevertical */
A horizontal drop-down menu is used to organize the site navigation structure. The optimal number of nesting levels is one or two. The fewer levels of attachments, the easier it is for a site visitor to find the information they need. How to create a regular horizontal menu is described in detail in.
How to make a horizontal dropdown menu 1. HTML markup and basic styles for a drop-down menu with one nesting levelThe HTML markup of a horizontal drop-down menu differs from a regular menu in that it links to the desired list item
