시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 메뉴 > Css 와 jquery를 이용한 아코디언 메뉴. 상세정보
사이트등록
현재접속자 새로고침
Css 와 jquery를 이용한 아코디언 메뉴.
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 메뉴
다운로드 횟수 637 회
간단설명 css를 이용한 아코디언 메뉴입니다. css수정에 따라 여러가지 형태 그리고 jquery수정에 따라 오픈형태등 입맛대로 쓰실 수 있습니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기가 없습니다 스크랩하기

 css를 이용한 아코디언 메뉴입니다. css수정에 따라 여러가지 형태로 만드실 수 있으니 유용하게 쓰실수 있습니다.
 
그리고 jquery수정에 따라 오픈형태등 입맛대로 쓰실 수 있습니다.

해당 사이트는 파일원본과는 차이가 있습니다 css수정으로 디자인을 다시 했으며

이미지와 함게 쓰신다면 더욱 멋지게 이용할 수 있을꺼 같습니다.


제가 만든 원본 html 코드는 아래와 같습니다.


<div id="naviwrapper">
                    <div id="navi2">
                        <ul id="menu">
                        <li class="li1"><a href="http://www.htmlkorea.co.kr/" target="_blank"><img id="html5" src="<?=$g4["path"]?>/img/html5korea.jpg" title="HTML5에 관한정보가 모여있는곳" alt="html5"/></a></li>
                        <li>
                         <a href="#">STUDY</a>
                         <ul>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=gnu">Gnuboard</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=word">Wordpress</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=html">Html/Css</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=java">Javascript</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=jquery">Jquery</a></li>
                            </ul>
                        </li>
                        <li>
                         <a href="#">COLLECT DATA</a>
                         <ul>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=jqq">Jquery</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=psd">Psd/Ai</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=webt">Web Template</a></li>
                            </ul>
                        </li> 
                        <li>
                         <a href="#">FAVORITE SITE</a>
                            <ul>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=css">Css</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=jq">Jquery</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=site">Site</a></li>
                            </ul>
                        </li>
                        <li>
                         <a href="#">PHOTO</a>
                            <ul>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=a2">It's me</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=photoo">Friends/Etc</a></li>
                            </ul>
                        </li>
                        <li>
                         <a href="#">COMMUNITY</a>
                         <ul>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=freeboard">Freeboard</a></li>
       <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=game">Game</a></li>
                            <li><a href="<?=$g4['path']?>/bbs/board.php?bo_table=a1">Youtube</a></li>
                            </ul>
                        </li> 
                        <li class="none"><a href="<?=$g4['path']?>/plugin/guestbook/guestbook.php">GUEST</a></li>
                        </ul>
                    </div>
                </div>

여기서 <?=g4['path']?>는 그누보드 사용시에 쓰이는 경로입니다. 사용자 하시는분의 사이트의 경로에 맞게 수정해주시면 됩니다.

 

그리고 css는 아래와 같습니다.


 #navi2 {width:100px; position:absolute; display:inline; float:left; top:0; padding:10px 0 0 30px;  font-family: 'NanumGothicWeb'; }
#navi2 .li1 {list-style:none; border:none; padding:4px 0;}
#navi2 ul {list-style:disc !important;}
#navi2 ul li { width:105px; line-height:250%; font-size:11px; border-bottom:1px #292929 dotted;}
#navi2 ul li ul {list-style:none !important;}
#navi2 ul li ul li { text-indent:5px; border:none;}
#navi2 ul li ul li a{color:#a9a9a9; font-weight:normal; display:block;}
#navi2 ul li ul li a:hover{color:#c745b2;}
#navi2 a { color:#292929; font-weight:bold; display:block}
#navi2 a:hover {color:#C745B2;}
#navi2.fixed {position:fixed; top: 0;}
#naviwrapper {width:165px; height:100%; position:relative;}
 

마지막으로 제이쿼리로 동작되는 부분이기 때문에 head와 head사이에 스크립트도 추가해주세요




사용자분의 상황에 맞게 css, 스크립트, html 코드를 작성을 하셧다면 아래와 같은 결과물을 보실 수 있씁니다.




스크립트는 에디터에서 출력이 안될수도 있어서 이미지로 올립니다 ㅜㅜ. 첨부파일을 확인해주세요~


 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 41526934 보이는 도배방지키를 입력하세요.