This is an example to display a navigation bar with a dropdown list for a selected menu item using pure CSS. To apply the styles for the menu items, the styles of border-radius has been used for each “li” in the HTML with the use of top, bottom, left and right border-radius. The # and the name of the ID are used in the CSS styles to apply a specific style for a given ID and in this example, the ID of the parent li for the dropdown has been used in CSS styles. The mouse hover event is accomplished by the use of the hover class in the styles with setting the background value for each li element to display the focus element.
This is an example to have a menu on a leaf with pure CSS. Each section of the leaf has been created with different div sections and the middle section of the leaf has been created as a filled color square. The curves have been created with the style border-radius whereas transform rotate class has been used to get the oval shape horizontally. The menu, a href is displayed on top of the leaf div and to accomplish this, the position style has been set up to absolute for both divs and href. Applying the leaf fold style for a part of the leaf has been accomplished by setting the border colours and to display the shadow of the folded leaf, “box-shadow” class is used.
This code is used to design a responsive navigation bar where it dynamically changes according to the screen size. If the screen width is greater than 700px, the “nav-bar” class will be displayed and “small-navbar” will be hidden and vice versa. The style “display” is used with the value “none” to hide the visibility and the value “block” to make it visible. To identify the screen size, the media screen attribute has been used by specifying a min-width. The input element has been used with its type checkbox to display the clickable div; its clicked events have been handled by applying the styles when checked and remove the styles when unchecked.
This example is of pagination using TYPO3. TYPO3 is an open-source web content management system written in PHP. Here we can see 3 different pagination styles. To create the pagination in TYPO3, you need the widget < f:widget.paginate> , which is then linked to pages along with the numbers created in the list. You can even set the alignment of the pages and number set on widget along with the HTML page. CSS plays an important role. The previous and next buttons display the logo where are the page numbers are highlighted when hovered. You can use this CSS and code for pagination for the CMS or YPO projects.
This snippet displays the pagination with gooey animation using SVG. To display the goory animation we will use SVG. SVG plays with the shapes and allows to easily connecting the divs. Using SVG, we will create a filter and apply to the HTML element (DIV). For this, the concept used is CSS transition, CSS animation, SVG filters, and JQuery. Over your mouse and check out the animation used. Here the filter is defined under SVG in an HTML page and using CSS we apply this SVG filter to DOM element. Filter element contains one or more filter primitives, which defines the operation done by filters in this example its “blur”. To make the sticky part, we are using filter to change colors based on the transformation matrix. This gives users the power to manipulate the image with special effects. To use this snippet you need to take a look at SVG and its filters and design it accordingly.
If you are going for the pagination without bootstrap or JQuery then this is an excellent example of pagination with only CSS. It is the simple page with the content for three different pages with the footer at the end of the page. There is no pagination element used, it only works on CSS styling with 3 radio buttons on the top of the page, instead of the traditional pagination displayed at the end of the page. Once you click on the radio button the respective data is displayed on the screen. This can be used only when you have a defined set of data and pages to be displayed. You cannot have it dynamically like the grid or .pagination element of the bootstrap. The code used in CSS displays the content in the block once the radio button is clicked. This can be used in your blog.
This snippet displays the complete example of Datatables of JS Library with pagination. This uses the Bootstrap 4 and Jquery 3.3, to create the table using a .table-fluid class which is responsible for the responsive nature of this table. Check out this table on various screen display, this would make the table display its responsive nature. The grid displays the 3 columns with sorting enabled in ascending and descending order. It has the search with the setting for the number of records to display be displayed in the grid. Notice the number of pages displayed according to the settings and number of records. This example uses the jquery.datatables.min.css file for styling but you can have your custom styling for each element.