문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_horizontal_navbar
wiki:css:css_note:css_horizontal_navbar

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_horizontal_navbar [2021/03/30 18:23]
emblim98 만듦 		wiki:css:css_note:css_horizontal_navbar [2023/01/13 18:44] (현재)
줄 458: 줄 458:
 =====Gray Horizontal Navbar===== =====Gray Horizontal Navbar=====
 얇은 회색 보더가 있는 회색 가로 네비게이션 바의 예제:\\ 얇은 회색 보더가 있는 회색 가로 네비게이션 바의 예제:\\
 +{{:wiki:css:css_note:grayhorizontalnavbar.png?600|}}\\
 ====예제==== ====예제====
 <HTML> <HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        ul {
 +            list-style-type: none;
 +            margin: 0;
 +            padding: 0;
 +            overflow: hidden;
 +            border: 1px solid #e7e7e7;
 +            background-color: #f3f3f3;
 +        }
 +        li {
 +            float: left;
 +        }
 +        li a {
 +            display: block;
 +            color: #666;
 +            text-align: center;
 +            padding: 14px 16px;
 +            text-decoration: none;
 +        }
 +        li a:hover:not(.active) {
 +            background-color: #ddd;
 +        }
 +        li a.active {
 +            color: white;
 +            background-color: #4caf50;
 +        }
 +    </style>
 +</head>
 +<body>
 +    <ul>
 +        <li><a class="active" href="#home">Home</a></li>
 +        <li><a href="#news">News</a></li>
 +        <li><a href="#contact">Contact</a></li>
 +        <li><a href="#About">About</a></li>
 +    </ul>
 +</body>
 +</html>
 +</HTML>
 +\\
 +=====Sticky Navbar=====
 +sticky navbar를 만들려면 ''%%position: sticky;%%''를 %%<ul>%%에 추가합니다.\\
 +sticky 요소는 스크롤 위치에 따라 relative 및 fixed 사이에서 전환됩니다.\\ 
 +주어진 오프셋 위치가 뷰포트에서 충족될 때까지, relative 배치된 다음 제자리에 "고정"됩니다 (position : fixed 처럼).\\
 +====예제====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        body {
 +            font-size: 28px;
 +        }
 +        ul {
 +            list-style-type: none;
 +            margin: 0;
 +            padding: 0;
 +            overflow: hidden;
 +            background-color: #333;
 +            position: -webkit-sticky;
 +            /* Safari */
 +            position: sticky;
 +            top: 0;
 +        }
 +        li {
 +            float: left;
 +        }
 +        li a {
 +            display: block;
 +            color: white;
 +            text-align: center;
 +            padding: 14px 16px;
 +            text-decoration: none;
 +        }
 +        li a:hover {
 +            background-color: #111;
 +        }
 +        .active {
 +            background-color: #4caf50;
 +        }
 +    </style>
 +</head>
  
 +<body>
 +    <div class="header">
 +        <h2>Scroll Down</h2>
 +        <p>Scroll down to see the sticky effect.</p>
 +    </div>
 +    <ul>
 +        <li><a class="active" href="#home">Home</a></li>
 +        <li><a href="#News">News</a></li>
 +        <li><a href="#contact">Contact</a></li>
 +    </ul>
 +    <h3>sticky Navigation Bar Example</h3>
 +    <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
 +    <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
 +      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
 +      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
 +</body>
 +</html>
 </HTML> </HTML>
 +\\
 +**Note:**
 +Internet Explorer는 sticky positioning(고정 위치 지정)을 지원하지 않습니다.\\ 
 +Safari에는 -webkit- 접두사가 필요합니다 (위의 예 참조).\\ 
 +또한 sticky positioning(고정 위치 지정)이 작동하려면 ''top'', ''right'', ''bottom'' 또는''left'' 중 하나 이상을 지정해야 합니다.\\
 +\\
 +=====Responsive Topnav=====
 +====예제====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
  
 +<head>
 +    <style>
 +        body {margin: 0;}
  
 +        ul.topnav {
 +            list-style-type: none;
 +            margin: 0;
 +            padding: 0;
 +            overflow: hidden;
 +            background-color: #333;
 +        }
  
 +        ul.topnav li {float: left;}
  
 +        ul.topnav li a {
 +            color: white;
 +            display: block;
 +            text-align: center;
 +            padding: 14px 16px;
 +            text-decoration: none;
 +        }
 +
 +        ul.topnav li a:hover:not(.active) {background-color: #111;}
 +
 +        ul.topnav li a.active {background-color: #4caf50;}
 +
 +        ul.topnav li.right {float: right;}
 +        @media screen and (max-width: 600px) {
 +            ul.topnav li.right,
 +            ul.topnav li {float: none;}
 +        }
 +    </style>
 +</head>
 +<body>
 +    <ul class="topnav">
 +        <li><a class="active" href="#home">Home</a></li>
 +        <li><a href="#news">News</a></li>
 +        <li><a href="#contact">Contact</a></li>
 +        <li class="right"><a href="#about">About</a></li>
 +    </ul>
 +    <div>
 +        <h2>Responsive Topnav Example</h2>
 +        <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
 +        <p>You will learn more about media queries and responsive web design later in out CSS Tutorial.</p>
 +        <h4>Resize the browser window to see the effect.</h4>
 +    </div>
 +</body>
 +</html>
 +</HTML>
 +\\
 +=====Responsive Sidenav=====
 +====예제====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        body {margin: 0;}
 +        ul.sidenav {
 +            list-style-type: none;
 +            margin: 0;
 +            padding: 0;
 +            width: 25%;
 +            background-color: #f1f1f1;
 +            position: fixed;
 +            height: 100%;
 +            overflow: auto;
 +        }
 +        ul.sidenav li a {
 +            display: block;
 +            color: #000;
 +            padding: 8px 16px;
 +            text-decoration: none;
 +        }
 +        ul.sidenav li a.active {
 +            background-color: #4caf50;
 +            color: white;
 +        }
 +        ul.sidenav li a:hover:not(.active) {
 +            background-color: #555;
 +            color: white;
 +        }
 +        div.content {
 +            margin-left: 25%;
 +            padding: 1px 16px;
 +            height: 1000px;
 +        }
 +        @media screen and (max-width: 900px) {
 +            ul.sidenav {
 +                width: 100%;
 +                height: auto;
 +                position: relative;
 +            }
 +            ul.sidenav li a {
 +                float: left;
 +                padding: 15px;
 +            }
 +            div.content {
 +                margin-left: 0;
 +            }
 +        }
 +        @media screen and (max-width: 400px) {
 +            ul.sidenav li a {
 +                text-align: center;
 +                float: none;
 +            }
 +        }
 +    </style>
 +</head>
 +<body>
 +    <ul class="sidenav">
 +        <li><a class="active" href="#home">Home</a></li>
 +        <li><a href="#news">News</a></li>
 +        <li><a href="#contact">Contact</a></li>
 +        <li><a href="#about">About</a></li>
 +    </ul>
 +    <div class="content">
 +        <h2>Responsive Sidenav Example</h2>
 +        <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
 +        <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
 +        <p>You will learn more about media queries and responsive web design later in our css Tutorial.</p>
 +        <h4>Resize the browser window to see the effect.</h4>
 +    </div>
 +</body>
 +</html>
 +</HTML>
 +\\
 +=====Dropdown Navbar=====
 +네비게이션 바 내부에 드롭다운 메뉴를 추가하는 방법.\\
 +====예제=====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +  <style>
 +    ul {
 +      list-style-type: none;
 +      margin: 0;
 +      padding: 0;
 +      overflow: hidden;
 +      background-color: #333;
 +    }
 +
 +    li {float: left;}
 +
 +    li a, .dropbtn {
 +      display: inline-block;
 +      color: white;
 +      text-align: center;
 +      padding: 14px 16px;
 +      text-decoration: none;
 +    }
 +
 +    li a:hover, .dropdown:hover .dropbtn {background-color: red;}
 +
 +    li.dropdown {display: inline-block;}
 +
 +    .dropdown-content {
 +      display: none;
 +      position: absolute;
 +      background-color: #f9f9f9;
 +      min-width: 160px;
 +      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 +      z-index: 1;
 +    }
 +
 +    .dropdown-content a {
 +      color: black;
 +      padding: 12px 16px;
 +      text-decoration: none;
 +      display: block;
 +      text-align: left;
 +    }
 +
 +    .dropdown-content a:hover {background-color: #f1f1f1;}
 +
 +    .dropdown:hover .dropdown-content {display: block;}
 +  </style>
 +</head>
 +<body>
 +  <ul>
 +    <li><a href="#home">Home</a></li>
 +    <li><a href="#news">News</a></li>
 +    <li class="dropdown">
 +      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
 +      <div class="dropdown-content">
 +        <a href="#">Link 1</a>
 +        <a href="#">Link 2</a>
 +        <a href="#">Link 3</a>
 +      </div>
 +    </li>
 +  </ul>
 +  <h3>Dropdown Menu inside a navigation Bar</h3>
 +  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
 +</body>
 +</html>
 +</HTML>
 {{tag>오션 CSS Horizontal Navbar}} {{tag>오션 CSS Horizontal Navbar}}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_horizontal_navbar.1617096222.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki