탐색 모음을 만드는 데 문제가 있습니다.

Question

사용자가 스크롤하는 경우에도 페이지의 특정 위치에 머물러있는 작은 탐색 모음을 만들려고합니다. 나는 내가 사용하고있는 템플릿에서 탐색 버튼을 위해 CSS를 사용하기 시작했다. 하지만 내 인생에서 나는 두 개의 버튼을 추가하는 방법을 알 수 없다. 초소형 질문이라면 유감이지만 도움을 정말로 사용할 수 있습니다. 고마워요! http://i.imgur.com/oN6osxv.jpg

버튼의 HTML 부분은 다음과 같습니다 :

<div class="downArrow"> 
    <div class="row"> 
     <div class="large-1 small-2 column push-11"> 
     <a href="#whatwedo" class="scroll down"><i class="icon-chevron-down"></i></a> 
     </div> 
    </div> 
</div> 

하는 CSS 스타일 시트 :

section.banner { 
    float: left; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
} 
section.banner .downArrow { 
    float: right; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    z-index: 100; 
    text-align: center; 
} 
section.banner .downArrow a.down { 
    float: left; 
    width: 50%; 
    height: 60px; 
    background: #cb7039; 
    text-align: center; 
} 
section.banner .downArrow a.down i { 
    color: white; 
    font-size: 1.688em; 
    line-height: 60px; 
    -webkit-transition: line-height 0.1s ease-in; 
    -moz-transition: line-height 0.1s ease-in; 
    -o-transition: line-height 0.1s ease-in; 
    transition: line-height 0.1s ease-in; 
} 
section.banner .downArrow a.down:hover i { 
    line-height: 80px; 
} 

웹 사이트는 이것이 내가 생각하고있는 것입니다 www.muzedimage.com 입니다

Answer 1

여기는 약간 FIDDLE으로 출발 할 수 있습니다.

CSS를 가지고 노는 시간을 보내십시오. 원하는만큼 버튼을 추가/스타일 지정하십시오.

HTML

<div class='holder'> 
    <div class='button1'>X</div> 
    <div class='button1'>Y</div> 
    <div class='button1'>W</div> 
    <div class='button1'>Z</div> 
</div>