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,674 / 12 Page
    [ 추천)시놀로지 docker에서 파일공유 편한 droppy 설치 하기 ] 댓글 7

    시놀로지 docker에서 파일 공유 편한 droppy 설치 하기 -10초면 설치 완료demo linkhttps://droppy.silverwin…

    [ 윈도우에 Windroy 다운로드 설치하여 안드로이드 어플 실행하기 ]

    윈도우에 Windroy 다운로드 설치하여 안드로이드 어플 실행하기https://windroy.en.softonic.com/download에서 다…

    [ winscp hidden files / 히든파일 보이게 하기 ( ctrl + alt + h ) ]

    winscp 패널 페이지 (기본 설정 대화 상자)환경 설정 대화 상자의패널 페이지에서파일 패널의 표시 및 동작 옵션을 구성 할 수 있습니다.로컬…

    [ phpMyadmin으로 Mysql data 백업 복원하기 및 전체 게시글 text 글자 수정 제거 하기 ]

    phpMyadmin으로 Mysql data 백업 복원하기 및 전체 게시글 text 글자 수정 제거 하기시스템 : 시놀로지 / 헤놀로지홈빌드 : …

    [ 헤놀로지 vmware workstation 백업서버를 이용한 복원기 ] 댓글 1

    헤놀로지 vmware workstation 백업서버를 이용한 복원기볼륨 충돌하여 저의 서버 복구 하였습니다 문제 추정 : wise care 36…

    [ 자체성공) tvheadend 녹화 파일 자동 인코딩 mkv 파일저장 하는방법(autoencoding.sh 사… ] 댓글 4

    tvheadend 자체적으로 mkv 파일 저장 가능 합니다.사용버전시놀로지 도커 버전 mkv 파일 저장 성공설정 조건tvheadend의 녹화 프…

    [ 성공)시놀로지 docker에서 seafile 설치작업 /docker 이미지 : m3adow/seafile ] 댓글 3

    시놀로지 docker에서 seafile 설치작업 성공docker 이미지 :m3adow/seafile웹에 파일 공유에 편리한 웹하드 입니다사용설치…

    [ skb smart2 기가wifi 공유기 설정 진입 안되는것 ]

    쓸모 없는 공유기 버리고 iptime공유기 대치 사용 하지만 그래도 한번 사용 해보자skb smart2 기가wifi 공유기 설정 진입 안되는것인…

    [ docker)Synology 에 Ubuntu를 설치하여 ssh 설치 외부 터미널 putty 로 접속하는 … ]

    docker)Synology 에 Ubuntu를 설치하여 ssh 설치 외부 터미널 putty 로 접속하는 방법먼저 하기 링크에 준하는 방법을 실패…

    [ 공구한 U5Mini용 BT리모콘 OTA Demo어플 사용으로 먹통됨// u5pvr 작은것 전용리모콘 bt O… ] 댓글 4

    공구한 U5Mini용 BT리모콘 OTA Demo어플 사용으로 먹통됨// u5pvr 작은것 전용리모콘 bt OTA프로그램 설치 사례정리망했습니다.…

    [ RSS 정보를 iframe 만들어 게시판 불러오기( board.php 를 rss.php 변경) ] 댓글 1

    최신버전을 확인하고자 다운로드 사이트 RSS 정보를 iframe 만들어 소스에 삽입하고자 합니다Free Online RSS to HTML Con…

    [ tvheadend를 docker에 가동 에러 원인 확인(추가 문의) ]

    tvheadend를 docker에 가동 에러 원인 확인(추가 문의)초기설치후는 정상시놀로지 도커로 tvh 설치후/아래 tv_grab 적용시 문제…

    [ CoreELEC IR remote LGUplus 4k 전면부 리모컨 스캔 scan code 값 설정 ] 댓글 8

    CoreELEC IR remote LGUplus 4k 전면부 리모컨 스캔 scan code 값 설정모든 키를 아래와 같이 정의 합니다전면부 bt…

    [ termux booting autorun bash_profile 자동실행 ] 댓글 2

    [termux booting autorun bash.profile 자동실행]# Termux 어플 자동 실행Autorun 어플설치 2개 실행te…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-06-10 22:41:34

    오늘의 홈 현황


    • 현재 접속자♨ 347 명
    • 오늘 가입자※ 4 명
    • 어제 가입자※ 5 명
    • 주간 가입자※ 22 명
    • 오늘 방문자 2,086 명
    • 어제 방문자 1,974 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,370,347 명
    • 전체 게시물※ 8,635 개
    • 전체 댓글수※ 24,723 개
    • 전체 회원수 11,034 명

    QR코드


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

    알림 0








    최신글↑