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,675 / 1 Page
    [ [PHP 강좌] 21. 파일,쿠키를 이용한 회원가입,로그인,로그아웃 기능 만들기 ]

    ◎ 네이버에서 [https://11q.kr 홈피] 검색 찾아오세요 ◎\r\n[PHP 강좌] 21. 파일,쿠키를 이용한 회원가입,로그인,로그아웃 …

    [ https 설치 하다 보니 .. 익스 경고창을 보니 ... 보안 인증/ 인증서 오류에 대하여 ] 댓글 1

    1) 그누보드의 config.php에서// config.php 가 있는곳의 웹경로. 뒤에 / 를 붙이지 마세요.// 예) http://g4.si…

    [ html 태그 없애기 ]

    html 태그 없애기html 태그 없애기 (php 메뉴얼을 참고)일반적으로 게시판 이나 방명록등의 경우 thml 태그를 허용할것인지아닌지 선택하…

    [ 댓글/ 코멘트 comments 에서 html 소스가 모두 보이는것 해결 ] 댓글 4

    .댓글에서는 태그 안먹이나요 ? 진행중 \r\n\r\n\r\n서비꼬 \r\n작성일시 2009.10.20 13:29:24 \r\n조회 474 \r…

    [ G4 Basic 버전과 G4 DTD 버전에서는 wr_file 필드가 조금 다르게 ]

    G4 Basic 버전과 G4 DTD 버전에서는 wr_file 필드가 조금 다르게 되어있습니다. 일단 각 게시판에 wr_file 필드를 모두 추가…

    [ 배너 관리 프로그램 홈피에 추가하기 / 배추빌더lite 에 베너 추가 ] 댓글 1

    . . Shims HomePage [https://11q.kr 홈피] .배너 관리 프로그램 홈피에 추가하기 \r\n\r\n\r\n1.관련 파일을…

    [ [아미나 pc홈 수정 ]자동 상단 automenu _CSS 가로 메뉴 ]

    아미나 pc홈 수정 ]자동 상단 automenu _CSS 가로 메뉴 \r\n\r\n <!-- menu_auto 수정및 추가 방법 아미나 p…

    [ [latest] 최신글에 이미지를 출력 ]

    .\r\n[latest] 최신글에 이미지를 출력\r\n글쓴이 : zero 2011-09-14 11:27:14 (18,498)\r\nCHARSET…

    [ 림스모바일 자동메뉴 열고 닫기 ]

    림스모바일 자동메뉴 열고 닫기 \r\n-설치방법\r\n1)menu.php---- m폴더\r\n2)site_map.php---m폴더\r\n3)si…

    [ embed 배추스킨 html 삽입 ] 댓글 1

    \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n[이 게시물은 관리자님에 의해 2013-06-10 21:06:36 21.PC_BBS에서…

    [ auto Menu 자동메뉴 ]

    간격조정styles.css에서 padding: 0 28px; 조정<? include_once("$g4[path]/menu_assets/me…

    [ phpMyAdmin The service is disabled now. ]

    mysql 백업한 자료 복원 후phpMyAdmin The service is disabled now.메세지 나타나고phpMyAdmin 접속이 되…

    [ foscam ip cam 공유기설정 ]

    foscam ip cam 공유기설정\r\n\r\n11q.kr 는 네이버/구글에서 검색 찾아오세요.\n[이 게시물은 관리자님에 의해 2013-11…

    [ <a href="http://www.naver.com">네이버</a> ]

    11q.kr 는 네이버/구글에서 검색 찾아오세요\r\n--------------------------------------------------…

    [ 포토스테이션 포트 관련 ]

    http://cafe.naver.com/synologynas/9077\r\n11q.kr 는 네이버/구글에서 검색 찾아오세요.\r\n\r\n\n[…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-06-24 21:23:27

    오늘의 홈 현황


    • 현재 접속자♨ 755 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 0 명
    • 주간 가입자※ 15 명
    • 오늘 방문자 1,075 명
    • 어제 방문자 0 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,392,344 명
    • 전체 게시물※ 8,652 개
    • 전체 댓글수※ 24,765 개
    • 전체 회원수 11,066 명

    QR코드


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

    알림 0








    최신글↑