Eve  Klocko

Eve Klocko

1591346838

CSS Tutorial | 9 CSS Accordion Menus

9 CSS Accordion Menus

#html #css

What is GEEK

Buddha Community

CSS Tutorial | 9 CSS Accordion Menus
Raleigh  Hayes

Raleigh Hayes

1626922800

Theme Switcher with CSS Variables - Tutorial

Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!

Useful Links:
GitHub: https://github.com/redhwannacef/youtube/tree/master/theme-switcher

#css variables #css #tutorial #css variables - tutorial #css theme switcher

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Raja Tamil

Raja Tamil

1652413050

Create A Simple Accordion Menu Using Vanilla JavaScript

By the end of this tutorial, you’re going to be building a simple accordion menu, just using Vanilla JavaScript of course, with the combination of HTML and CSS.

What are we building?

Accordion Menu HTML Structure

The HTML code of the Accordion Menu is pretty straightforward.

I have a simple section element with an id called #accordion-container.

Inside that, add three divs with the class name .menu and each contains two HTML elements: .header and .content.

Header element also contains .title and .icon elements.

<section id="accordion">

    <div class="menu">
        <div class="header">
            <div class="title">Title 1</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 1
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 2</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 2
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 3</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 3
        </div>
    </div>

</section>

Accordion Menu CSS

Let’s add some CSS to make to match the final result.

Define a CSS rule for #accordion with a max-width to 500px and make it center to the screen horizontally using margin: 0 auto property.

After that, add borders all-around to each .menu item which is the clickable area of the accordion menu.

#accordion {
  max-width: 500px;
  margin:0 auto;
}

.menu {
  border:1px solid #008080;
  border-bottom:none;
}

 .menu:last-child {
  border-bottom:1px solid #808080;
}

Using flexbox, lets move the “+” icon to the right and keep the title on the left.

Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained


.header {
  display:flex;
  padding:10px; 
  cursor: pointer;
}

.title {
  flex:1;
}

.icon {
  width:20px;
} 

 .content {
  padding:10px;
} 

Finally, hide the .content by default and I’ll show you how to toggle it’s visibility using JavaScript in just a moment.

.content {
  display:none;
  padding:10px;
} 

That looks much better.

Now let’s move into the fun part.

Accordion Menu JavaScript

The first step is to get all the DOM references of the header as well as the content and assign them to the constant arrays called headers and contents respectively.

const headers = document.getElementsByClassName("header"),
      contents = document.getElementsByClassName("content");

Secondly, iterate through the headers array using for loop and attach a click event to each header inside with a callback arrow function.

Recommended
JavaScript For Loop Click Event ← Issues & Solutions Explained

for (let i = 0; i < headers.length; i++) {
     headers[i].addEventListener("click", () => {
     });
}

Finally, toggle the content visibility by using the display CSS property on it. I used the ternary operator here to achieve this but you can also use the regular if statement.

Continue Reading…

#HTML #css #JavaScript 

Position Layout property in CSS

Hello, World! In this article, we will try to grasp the concepts of one of the trickiest and crucial topics in CSS.

Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.

The widely used positions property in CSS are as follows:

1. Static position:

When an HTML element gets assigned with

staticposition, the various position properties likeleft,right,topandbottomdoesn’t work. Elements in an HTML document carry static position by default.

Let’s copy and paste the code below in an IDE to view what’s happening.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 200vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }

      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }

      #Div2 {
        position: static;
        left: 20px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

Upon adding position property

staticto the selector idDiv2, we saw that the position ofDiv2box didn’t change. Hence, we can conclude that elements with positionstaticdoesn’t get affected byleft, right,toporbottomproperties.

2. Relative position:

When an element gets assigned with position

relative, the position properties likeleft,right,top andbottomaffects the element’s position in the page relative to its normal position asstatic.

Let’s copy and paste the code below to

Div2selector to replace the previous position property.

#Div2 {
        position: relative;
        left: 20px;
        top: 50px;
      }

We can see that the

Div2box changed its position relative to its normal orstaticposition, i.e.20pxfrom theleftand50pxfrom thetop. Upon applyingrelativeposition property to an element, other contents in the same box won’t get affected and change positions

3. Fixed position:

This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply

fixedvalue to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from its actual position, becomes relative to the entire viewport, and doesn’t get scrolled.

Let’s copy and paste the code below to know the difference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 400vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }
      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      #Div2 {
        position: fixed;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

After scrolling, we can see that the id

Div2gets fixed in the topmost corner of the document.

4. Absolute position:

Just like

fixedposition, theabsoluteposition property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn’t regard it as its child anymore. The element becomes relative to the document.

#css #css3 #css-position-property #tutorials #learning-css #html-css