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 / 50 Page
    [ ● ESxi서버의 VM가동화면을 VMRC로 사용시 해상도 변경 임의사이즈 마우스 드래그로 키우기 설정 방법 ]

    ● ESxi서버의 VM가동화면을 VMRC로 사용시 해상도 변경 임의사이즈 마우스 드래그로 키우기 설정 방법-VMRC로 사용 방법- esxi 서버…

    [ ● 정보) 독립 실행형 ESXi 호스트에서 가상 머신을 백업하는 방법은 무엇입니까? ]

    ● 정보)독립 실행형 ESXi 호스트에서 가상 머신을 백업하는 방법은 무엇입니까? 내용 https://serverfault.com/questio…

    [ ● redpill boot loader dsm7.0 mac address 설정시 mac을 2개 설정시 인식못… ]

    ● redpill boot loader dsm7.0 mac address 설정시 mac을 2개 설정시 인식못하고 1개로 설정시 접속 상태 확인-…

    [ ● 시놀로지 dsm 7.0 putty 명령어 systemctl로 저의 시스템 동작상태 및 ??? 명령어를 … ] 댓글 2

    ● 시놀로지 dsm 7.0 putty 명령어systemctl로 저의 시스템 동작상태 및 ??? 명령어를 실행 확인 으로 실행 중지 재시작 명령 …

    [ 실패) ESXi 7.0 한방팩 만들기 ] 댓글 1

    실패) ESXi 7.0 한방팩 만들기●https://www.098.co.kr/esxi-7-0-%ec%84%a4%ec%b9%98-%ed%95%9c…

    [ ● Esxi server veeam 백업 프로그램 다운로드 설치방법 ]

    ● Esxi server veeam 백업 프로그램 다운로드 설치방법헤놀로지 설치 가동에 VMDK 백업으로 작업 진행 합니다1.Esxi serve…

    [ ● DSM 7.1 Active Backup for Business 패키지설치 activated 활성화 작… ] 댓글 3

    ● DSM 7.1 Active Backup for Business 패키지설치 activated 활성화1) 패키지 설치 2) 실행열기히면 시놀로지…

    [ ● 작업)synology nas ssd cache 온도로 인한 shutdown 해결 정보 및 cpu dis… ]

    ● 작업 설정)synology nas ssd cache 온도로 인한 shutdown 해결 정보--> 링크 정보를 근거로 설정해봅니다 // …

    [ ● 우리집 외부 아이피 인터넷 연결에서 열린 포트 식별 확인 하기 ]

    ● 우리집 외부 아이피인터넷 연결에서 열린 포트 식별 확인 하기당신의 외부 주소221.140.111.159오픈 포트 파인더원격 주소221.140…

    [ 해놀 7.2.1-69057 to 7.2.2-72806 성공 // 이상무 ]

    ●해놀 7.2.1-69057 to 7.2.2-72806 성공 // 이상무오랜만에 업데이트 진행 합니다.....진행 조건 : videostatio…

    [ G메일이 사진이 표시 되지 않는다 해결 방법. ]

    ■ G메일이 사진이 표시 되지 않는다 해결 방법.□ 해결 방법: 익스플로러 상단 메뉴에서 [도구>인터넷 옵션>보안>사용자 지정 …

    [ ckfinder config ] 댓글 1

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

    [ MyDisk 1.0.0 - 회원 공유 형식의 심플한 웹하드 ]

    ♥◎ 네이버에서 [https://11q.kr 홈피] 검색 찾아오세요 ◎http://sir.co.kr/bbs/board.php?bo_table=g…

    [ 리눅스에서는 몇가지 중요한 명령어들을 사용하는 것이 기본이라 할 수 있습니다 ]

    \r\n웹문서\r\n\r\n[DOC] \r\n\r\n\r\n\r\n리눅스에서는 몇가지 중요한 명령어들을 사용하는 것이 기본이라 할 ...\r\n…


    ♥간단_메모글♥


    최근글


    새댓글



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

    오늘의 홈 현황


    • 현재 접속자♨ 632 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 0 명
    • 주간 가입자※ 9 명
    • 오늘 방문자 24,156 명
    • 어제 방문자 60,335 명
    • 최대 방문자 122,350 명
    • 전체 방문자 6,408,853 명
    • 전체 게시물※ 9,029 개
    • 전체 댓글수※ 25,722 개
    • 전체 회원수 11,731 명

    QR코드


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

    알림 0








    최신글↑