11.Nas_1


새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


[ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바

♨ 카랜더 일정 :
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    \r\n
    \r\n
    \r\n

    [ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바

    \r\n\r\n
    \r\n
    \r\n
    \r\n

    Gruve :: [ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바

    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    gruve.tistory.com/3 - 저장된 페이지
    \r\n
    공개적으로 +1했습니다. 실행취소
    \r\n

    [ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바 · Web/Script, jQuery 2012/ 07/24 21:18. [ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바. 심플하고 ...
     

    \r\n

     

    \r\n\r\n
    \r\n
    \r\n

      * {About the Author}
      * {Documentation}
      * {Download}
    HorizontalNav

    \r\n\r\n
    \r\n
    \r\n

    HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy and adds support for IE7.

    \r\n\r\n
    \r\n
    \r\n

    Example One

    \r\n\r\n
    \r\n
    \r\n

    This is an example so you can see the difference between a horizontal navigation with no fixed widths and then with a navigation that has the plugin applied to it. There are no requirements to how you style the navigation and adding padding, margins or borders to any of the elements won't break the effect.
      * {Demo}
      * {JavaScript}
      * {HTML}
      * {CSS}
    Navigation with horizontalNav disabled
      * {Navigation Item}
      * {Work}
      * {Blog}
      * {About}
      * {Contact}

    \r\n\r\n
    \r\n
    \r\n

    Navigation with horizontalNav enabled
      * {Navigation Item}
      * {Work}
      * {Blog}
      * {About}
      * {Contact}
    // When document is ready...
    $(document).ready(function() {
     // Call horizontalNav on the navigations wrapping element
     $('.full-width').horizontalNav({});
    });
    <nav class="horizontal-nav full-width">
     <ul>
      <li><a href="#">Navigation Item</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
    </nav>
    // There is no required CSS for this plugin to work properly
    // but here is what is being used to style this demo
    .horizontal-nav {
     background: #efefef;
     border-radius: 6px;
    }
    .horizontal-nav ul {
     background: #128F9A;
     float: left;
     text-align: center;
     border-radius: 6px;
     border: 1px solid #0e7079;
    }
    .horizontal-nav ul li {
     float: left;
     border-left: 1px solid #0e7079;
    }
    .horizontal-nav ul li:first-child {
     border-left: 0 none;
    }
    .horizontal-nav ul li a {
     display: block;
     padding: 10px 20px;
     color: #fff;
     border-top: 1px solid rgba(255,255,255, 0.25);
     border-left: 1px solid rgba(255,255,255, 0.25);
    }
    .horizontal-nav ul li:first-child a {
     border-left: 0 none;
    }
    .horizontal-nav ul li a:hover {
     background: #12808a;
    }
    .horizontal-nav ul li:first-child a {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
    }
    .horizontal-nav ul li:last-child a {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
    }
    Available Options
    Key   Default value   Description   
    responsive   true   This option will allow the navigation to auto adjust when the window is resized. 
    responsiveDelay   100   The amount of time to wait before re-adjusting the navigation on window resize. Value is set in milliseconds. 
    tableDisplay   true   Enables modern browsers to use display: table or set to false to manually calculate the widths of list items.  

    \r\n\r\n
    \r\n
    \r\n

    HorizontalNav is built and maintained by {Sebastian Nitu} and is licensed under a {Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License}. Follow me on {Twitter}, {GitHub} and {Dribbble}.

    \r\n\r\n
    \r\n
    \r\n

    {[Creative Commons License]} 

    \n
    [이 게시물은 관리자님에 의해 2013-11-18 21:29:50 11.H_BBS에서 이동 됨]
    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view text|top|||||||||||||

    관련자료

    댓글목록

    등록된 댓글이 없습니다.

    목록

    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


    • 일간 조회수
        • 게시물이 없습니다.
    • 주간 조회수
        • 게시물이 없습니다.
    • 월간 조회수
        • 게시물이 없습니다.


    Total 1,689 / 30 Page
    [ ● ★★★ 부트로더 강력추천 v045_v4 )헤놀로지 RedPill tinyCore 만능부트로더 xpenol… ] 댓글 8

    ●★★★ 부트로더 강력추천 v045_v4 )헤놀로지 RedPill tinyCore 만능부트로더 xpenology dsm7.0.1적용 간단 빌드 …

    [ ●작업성공) docker 의 연결 정보 telegram 메세지 message 전송 ]

    ● docker 의 연결 정보 telegram 메세지 message 전송 도커의 start/ stop 정보를 전송 합니다 ▶ portainer …

    [ ● dsm7.1 변경후 텔레그램 안되는것 및 web station 설정 조건 ]

    ● dsm7.1 변경후 텔레그램 안되는것 및 web station 설정 조건 - 7.0에서 마이그레션 진행 1) 인증서 자동 갱신 설정 - ro…

    [ ● 시놀로지 하이퍼 백업 에러 발생은 폴더 삭제시 발생 합니다 / SYNOLOGY HYPER BACKUP E… ]

    ● 시놀로지 하이퍼 백업 에러 발생은 폴더 삭제시 발생 합니다 / SYNOLOGY HYPER BACKUP ERROR원인 : 백업 폴더 설정에 있…

    [ ● 작업) 헤놀로지(시놀로지)에 Hass.io 설치하기 ]

    ● 작업)헤놀로지(시놀로지)에 Hass.io 설치하기 패키지 소스 확인 > 추가 하기https://synocommunity.com/쉬운 설…

    [ ●준비_시놀로지 작성) cafe24 개인도메인 설정하기 ]

    ● 시놀로지 작성) cafe24 개인도메인 설정하기https://cwhboy83.tistory.com/18작업 준비 합니다Cafe24호스팅케이알…

    [ ● Esxi 서버 vm 백업 툴 개방형 가상화 형식 도구(ovftool) 다운로드하여백업(Backup)하고… ] 댓글 1

    ● Esxi 서버 vm 백업 툴개방형 가상화 형식 도구(ovftool) 다운로드하여백업(Backup)하고 복원(Restore)하기방법1) esx…

    [ 메인 겔러리 사진 숫자 늘리기 ]

    ◎ 네이버에서 [https://11q.kr 홈피] 검색 찾아오세요 ◎\n[이 게시물은 관리자님에 의해 2013-11-18 21:29:50 11.…

    [ PC200% 활용 ] 원도우 2개 멀티부팅 메뉴 easy BCD/windows booting ] 댓글 1

    PC200% 활용 노하우를 전수해주마!-멀티부팅* 가끔 원도우가 1개 문제로 한개더 원도우 ,2개 깔고원도우를 설치하는 멀티부팅 메뉴 만드는 프…

    [ ds107/ds712 diskstation synology 패스워드 초기화 하기,reset,password ]

    ds107/ds712 diskstation synology 패스워드 초기화 하기,reset,password뒷면의 reset 구멍에 볼펜으로 6~…

    [ 모바일 림 ]

    모바일 글쓰기 림모바일 삭제는 되지 않음\r\n고수\r\n.\r\nShims HomePage\r\n[https://11q.kr 홈피] \r\n.…

    [ .html 태그 없애기 ] 댓글 1

    카테고리 Function(함수) 》 S-Z 함수 》 String\n[이 게시물은 관리자님에 의해 2013-11-18 21:29:50 11.H_B…

    [ pc버전 배추스킨사용시 림스모바일 사용시 삭제 않되는 문제 추가 m/delete.php에 스킨 경로 #3추가… ]

    \r\n[자답]/ pc버전 배추스킨사용시 림스모바일 사용시 삭제 않되는 문제 추가 m/bbs/delete.php에 스킨 경로 #3추가시작\r\n…

    [ 배추빌더 라이트 lite logo 상단 로그 타이틀 상단 로그 ]

    Lite의 경우에는... 로고와 검색창, 검색창 밑의 링크들과 게시판 그룹 까지는 head.php수정해 주시면 되고 가운데는 index.php를…

    [ G4DTD -> G4 디비변환 (UTF-8 only) ]

    목록글쓰기G4DTD -> G4 디비변환 (UTF-8 only) 모조키작성일시 2013.05.09 09:28:16조회 45 댓글 1 첨부파일…

    [ AMINA TOP MEMU변경/ [topmenu] Drop Down 세로 메뉴 AUTO MENU ] 댓글 2

    [topmenu] Drop Down 세로 메뉴\r\n\r\n\r\n\r\n수정위치 : \r\nw:\ami\thema\basic\menu.php\…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2025-07-09 17:51:33

    오늘의 홈 현황


    • 현재 접속자♨ 489 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 1 명
    • 주간 가입자※ 7 명
    • 오늘 방문자 55,572 명
    • 어제 방문자 75,758 명
    • 최대 방문자 122,350 명
    • 전체 방문자 6,574,332 명
    • 전체 게시물※ 9,029 개
    • 전체 댓글수※ 25,722 개
    • 전체 회원수 11,732 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑