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 / 81 Page
    [ Reboot to LibreELEC apk ]

    Reboot to LibreELEC apk■ ▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다 ♠ . ☞ 본자료는 https://11q.k…

    [ Rsync 란 ? 복사 백업 tool 사용방법 ]

    Rsync 란 ? 복사 백업 tool 사용방법Rsync(Remoe Sync)는 원격에 있는 파일과 디렉토리를 복사하고 동기화 하기 위해서 사용하…

    [ 펌정보)SSL 적용 후 무조건 https로 접속되게 하는 방법 ]

    SSL 적용 후 무조건 https로 접속되게 하는 방법이학권2018.07.11 14:22:35조회10,506댓글22검색목록목록글쓰기안녕하세요! …

    [ ● PHP, Mysql 응답속도 개선 홈페이지가 느리다고 수정 서버응답 확인 ] 댓글 2

    ●PHP, Mysql 응답속도 개선 홈페이지가 느리다고 수정PHP 문서 작성중 파일을 수정했는데 웹서버에 반영 속도가 느리다면php.ini 파일…

    [ ● 시놀로지 기본 ipkg 설치 각종 유틸리티 사용을 위한 ipkg 설치 과정 ] 댓글 3

    ● 시놀로지 기본 ipkg 설치 각종 유틸리티 사용을 위한 ipkg 설치 과정https://11q.kr/www/bbs/board.php?bo_t…

    [ ● ESXi 7.0 Web Client 자동 로그아웃 끄기 ]

    ●ESXi 7.0 Web Client 자동 로그아웃 끄기 esxi 로그인 작업후 얼마의 시간 경과후 아무런 작업이 없어서 로그아웃되었습니다 ▶V…

    [ ● USB 장치를 ESxi서버 VM에 연결하는 방법 정보 ]

    ● USB 장치를 ESxi서버 VM에 연결하는 방법 정보 https://www.nakivo.com/blog/how-to-use-usb-devic…

    [ ● 정보 [20211205 업데이트] DSM7.0.1 온라인 컴파일(도움 없이 컴파일 3분), eSATA 마… ] 댓글 2

    ● 정보[20211205 업데이트] DSM7.0.1 온라인 컴파일(도움 없이 컴파일 3분), eSATA 마운트, 셧다운 및 기타 드라이버 추가,…

    [ ● 작업참조 정보)헤놀로지 RedPill tinyCore 만능부트로더 for Native img 적용 가이드 ] 댓글 8

    ● 작업준비)헤놀로지 RedPill tinyCore 만능부트로더 for Native img 적용 가이드슈퍼멤버 게시글 정보게시됨2021년 12월…

    [ ● DSM 설치과정이 비정상적으로 중단된경우 접속 해결하기 ] 댓글 1

    ● DSM 설치과정이 비정상적으로 중단된경우 접속 해결하기헤놀로지를 물리파워버튼으로 자꾸 종료하시면 HDD에 무리가 갈수 있으니,가급적 teln…

    [ 설치작업성공● speedtest - docker 설치 모니터링 설치방법 portainer stack 으… ] 댓글 2

    설치작업● speedtest - docker 설치 모니터링 설치방법 portainer stack 으로 설치 방법설치 방법 portainer로 접…

    [ ● Esxi 서버 부트로더 변환 작업이 필요 없는 img 파일 올리기 ] 댓글 1

    ● Esxi 서버 부트로더변환 작업이 필요 없는img 파일 올리기 저는 Esxi 서버에서 img을 그대로 사용합니다방법은vmdk 변환을 1회만 …

    [ ● MobaXterm terminal 로 사용 포트 확인하기 ]

    ● MobaXterm terminal 로 ip별 사용 포트 확인하기내부및 외부 모두 사용중인 ip별 port scan 가능합니다예) 내부로컬은 …

    [ ● 시놀로지작업)동영상 분석 테스트 letsencrypt 업데이트 및 자동 업 데이트 ] 댓글 1

    ● 시놀로지작업)동영상 분석 테스트 letsencrypt 업데이트 및 자동 업 데이트주) 1일 5회이상 발급 안됨,,,,에러 나옴 >>…

    [ ★★★ 무료ssl 인증서 시놀로지작업_재설치 검증성공 ) 무료ssl 인증서 자동생성 Nginx Proxy M… ] 댓글 6

    최신정보시놀로지 나스 의 도메인 네임서버 Cloudflare 로변경 acme.sh 인증서 자동 업데이트까지 진행 하기https://cafe.na…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2025-07-02 13:28:30

    오늘의 홈 현황


    • 현재 접속자♨ 259 명
    • 오늘 가입자※ 2 명
    • 어제 가입자※ 3 명
    • 주간 가입자※ 10 명
    • 오늘 방문자 1,789 명
    • 어제 방문자 2,638 명
    • 최대 방문자 75,211 명
    • 전체 방문자 6,106,834 명
    • 전체 게시물※ 9,028 개
    • 전체 댓글수※ 25,716 개
    • 전체 회원수 11,726 명

    QR코드


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

    알림 0








    최신글↑