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 / 83 Page
    [ 게시판글 공유용 글주소복사 /새창으로보기/ 글수정 메뉴 버튼 상단 메뉴 추가 ] 댓글 1

    빨강모자님의 조언에게시판글 공유용 글주소복사 /새창으로보기/ 글수정 메뉴 버튼 상단 메뉴 추가 합니다파일 :w:\g5s\skin\board\Ba…

    [ showdown 다운예약 추가) showdown 으로 드라마 vod 다운로드 설정하기 ]

    showdown다운예약 추가) showdown 으로 드라마 vod 다운로드 설정하기showdown 의 기본 동작에 관련 패키지 동작설정과 드라마…

    [ 추천)구글 TV 플레이어 마켓에서 iptv 시청 플레이 녹화가능하며 타임쉬프트 가능한 progtv.apk … ] 댓글 10

    구글 TV 플레이어 마켓에서 iptv 시청 플레이 녹화가능하며 타임쉬프트 가능한 progtv.apk 추천한글화 버전 파일https://11q.k…

    [ 우분투)18.04 에 tvheadend 설치 windows 10 vmware workstation 15 파… ] 댓글 30

    우분투 18.04 에 tvheadend 설치windows 10 vmware workstation 15 입니다헤놀로지는 트랜스코딩을 못해 사용불가…

    [ nas HDD 를 PC에서 USB로 연결 data 복원하기 UFS Explorer Professional R… ] 댓글 50

    nas HDD 를 PC에서 USB로 연결 data 복원하기 UFS Explorer Professional Recovery간단하게 설치 백업 복원…

    [ 파일삭제)설치순서사진_DS3617xs 6.1 Jun's Mod V1.02a2-alpha_11q.kr_v2_s… ] 댓글 23

    최종 파일 사용하세요성공up)DSM6.1.1에서 DSM6.1.2로 juns-mod-1.02b-ds3615 이용 업데이트 LAN카드 정상 연결 .…

    [ nano edit synology/xpenology vi edit 대응간단 패키지 설치하여 구동하기 ] 댓글 4

    nano edit synology/xpenology vi edit 대응간단 패키지 설치하여 구동하기유닉스 vi 에디터가 불편한 에디터 입니다사용…

    [ dsm 6.1 기본 설치 저의 설정값 저장 ] 댓글 10

    dsm 6.1 기본 설치 저의 설정값 저장==============Intro:This mod is brought to you by Jun <…

    [ 중요) 인터넷 속도가 버벅임 iptv 시청불가능 대응 iptime공유기 보인설정 및 기타 조치 대응… ] 댓글 8

    아래 내용은 개인적인 구성에 문제로 발생될수 있는 내용입니다아래 인터넷 버벅임 문제로 1차 해결 안되어2차 문제 발생결론 : 아들방에서 다른 컴…

    [ 이메일 서버설정 )Dsm 6_1_시놀로지 메일서버 설정 2번째 분석 ] 댓글 6

    \r\n\r\n이메일 서버설정 )Dsm\r\n6_1_시놀로지 메일서버 설정 2번째 분석 \r\n\r\n사용 dsm : ds3615 DSM 6.1…

    [ 삭제)DSM 6.1.1_SW_UP)헤놀로지 Jun's Mod V1.02-alpha_DS3615/3617xs_… ] 댓글 53

    최종 파일 사용하세요성공up)DSM6.1.1에서 DSM6.1.2로 juns-mod-1.02b-ds3615 이용 업데이트 LAN카드 정상 연결 .…

    [ 시놀로지 사용자 간단 파일 공유 DOCKER droppy 설치 간단 공유 추천 드립니다. ] 댓글 1

    DOCKER droppy 는 간단 설치로 파일 공유 파일 이동/복사하여 공유가 간펀합니다특징을 설명 하면1) 파일 보관에 복사 관리가 편하고 윈…


    ♥간단_메모글♥


    최근글


    새댓글



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

    오늘의 홈 현황


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

    QR코드


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

    알림 0








    최신글↑