Icon Bar 예제

Icon Bar 이미지(수직, 수평)

HTML

<div class="icon-bar" id="navigation">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>

수직 CSS

.icon-bar {
  width: 90px; /* Set a specific width */
  background-color: #555; /* Dark-grey background */
}

.icon-bar a {
  display: block; /* Make the links appear below each other instead of side-by-side */
  text-align: center; /* Center-align text */
  padding: 16px; /* Add some padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 36px; /* Increased font-size */
}

.icon-bar a:hover {
  background-color: #000; /* Add a hover color */
}

.active {
  background-color: #04AA6D; /* Add an active/current color */
}

• transition : CSS 속성을 변경할 때 애니메이션 속도를 조절함.
• hover : 마우스 오버 이벤트 발생 시, CSS 적용

수평 CSS

.icon-bar {
  width: 100%; /* Full-width */
  background-color: #555; /* Dark-grey background */
  overflow: auto; /* Overflow due to float */
}

.icon-bar a {
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
  padding: 12px 0; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 36px; /* Increased font size */
}

.icon-bar a:hover {
  background-color: #000; /* Add a hover color */
}

.active {
  background-color: #04AA6D; /* Add an active/current color */
}

• float : left는 element 요소들이 왼쪽부터 배치하게 적용

Bar 클릭 이벤트 적용(jQuery 추가)

1. Bar 클릭 시 a 태그의 'active' 클래스 삭제
2. 클릭한 a 태그 대상에 'active' 클래스 적용

<script>
    $(document).ready(function(){
        $('#navigation a').on("click",function () {
        $('#navigation a').removeClass('active');
        $(this).addClass('active');
        });
    });    
</script>

참고 : https://www.w3schools.com/howto/howto_css_icon_bar.asp