HTML의 가로 메뉴 모음-HTML 튜토리얼-php.cn

HTML의 가로 메뉴바 예시

예시 #3

Conclusion

집

웹 프론트엔드

HTML 튜토리얼

HTML의 가로 메뉴 모음

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:45 PM

html html5 HTML Tutorial HTML Properties HTML tags

Html에는 강조 표시되어 사용자에게 더욱 매력적인 기능을 제공하는 다양한 기능이 있습니다. 스크롤 막대에 대해서는 이전 기사에서 이미 논의했습니다. 메뉴 막대의 동일한 항목에도 사용자 측에 더 많은 기능이 제공됩니다. 일반적으로 메뉴바는 내용을 분류하는데 도움을 주고 웹페이지 가독성을 높여줍니다. 사용자 최종 메뉴 표시줄에서 더 많은 대화형을 얻으려면 가장 간단한 방법이 도움이 됩니다. 스크롤 막대에는 메뉴 막대와 마찬가지로 가로 및 세로 유형이 모두 있으며 개발자가 사용해야 하는 두 가지 유형도 있습니다. 아래 개념에서 좀 더 자세한 내용을 살펴보겠습니다.

구문:

가로/세로 메뉴 표시줄을 사용하는 동안 CSS를 사용하여 HTML 페이지의 모든 부분에 스타일을 반영해야 합니다. 일반적으로 탐색 모음에는 하위 문서나 하위 파생 문서를 구현하기 위한 기반으로 일부 표준 HTML이 필요합니다. 탐색 표시줄이나 가로 표시줄에는 기본적으로 링크 목록이 있으므로

그리고

<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>

로그인 후 복사

위 코드는 가로 메뉴바의 기본 구문입니다.

HTML의 가로 메뉴바 예시

개념 이해를 돕기 위해 몇 가지 예를 살펴보았습니다.

예시 #1

코드:

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

로그인 후 복사

샘플 출력:

HTML의 가로 메뉴 모음

위 예에서는 웹 페이지를 생성할 때 메뉴 항목을 가로 보기로 표시합니다. 여기서는 사용자 정의 보기가 행 단위이므로 일반적으로 메뉴 항목만 가로 패널에 표시됩니다. 수평 현명한. 모든 HTML 문서에 동일한 CSS 스타일 클래스를 사용할 수 있습니다.

예시 #2

코드:

<html>
<body>
<p style="font-family:Comic Sans MS">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</p>
</body>
</html>

로그인 후 복사

샘플 출력:

HTML의 가로 메뉴 모음

두 번째 예는 첫 번째 예와 동일하지만 여기서는 HTML 문서에서 CSS 스타일을 사용하지 않습니다.

태그에서는 글꼴 모음, 너비, 높이 등과 같은 일부 CSS 스타일을 사용합니다

예시 #3

코드:

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

로그인 후 복사

샘플 출력:

HTML의 가로 메뉴 모음

일부 무료 수평 메뉴 유형:

모든 기능은 다양한 시나리오에 대한 컬렉션이었습니다. 가로 메뉴에는 순수한 CSS가 포함되어 있으며 모바일에서 반응하고 작동하는지 확인하기 위해 자바스크립트도 사용합니다.

일부 가로 탐색은 완벽하게 작동하지만 일부 기능은 스크립트에서 지원되지 않으며 브라우저 호환성 문제도 있습니다. 웹사이트 디자인에서 가로 막대는 미니멀한 디자인에 적합하며 사용자에게 간단한 탐색 인터페이스 공간을 제공하는 데에도 적합합니다.

주황색의 반응형 수평 탐색 메뉴:

가로 메뉴 유형 중 하나이며, 완전히 순수한 CSS 스타일을 갖춘 가볍고 미니멀한 메뉴입니다. 또한 메뉴는 반응형으로 모바일 기기에서 세로형 메뉴 형태로 변형되어 모바일에서도 작은 화면에서도 볼 수 있도록 지원합니다. 데스크톱에서는 아무 것도 변경되지 않으며 웹 브라우저 화면에서만 작동하고 휴대폰에서도 동일하게 작동합니다.

예:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

로그인 후 복사

출력:

HTML의 가로 메뉴 모음

녹색 탭 가로 메뉴 유형:

이 메뉴는 탭 인터페이스의 가로 패널 디자인 패턴 중 하나입니다. 이는 구매/판매 제품 상품 애플리케이션과 같은 방대하고 값비싼 애플리케이션을 사용하게 되며 최종 사용자가 다양한 메뉴 항목을 매우 빠르고 쉽게 클릭하여 DB에서 사용자에게 결과를 얻는 데 도움이 될 것입니다. 위 유형에서는 jquery와 같은 일부 스크립트를 사용하지만 여기서는 HTML과 CSS만 사용하므로 데이터를 사용자 화면에 빠르게 로드합니다. 이전 주제에서 동일한 예를 들어 보겠습니다

예:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

로그인 후 복사

출력:

HTML의 가로 메뉴 모음

동일한 예를 사용했지만 일부 CSS 스타일을 수정하고 HTML 파일을 업데이트했습니다. 탭에 마우스 커서를 놓을 때마다 언급된 녹색 텍스트가 자동으로 강조 표시되므로 사용자 선택에 따라 마우스 커서가 다른 탭을 이동할 때 변경됩니다.

가로 막대 버블랩:

이전 유형과 동일한 이 메뉴 표시줄에서는 HTML에 완전한 CSS 스타일을 사용합니다. 또한, 활성화해야 하는 border-radius 속성을 추가하여 버블 유형처럼 보일 것입니다. 다른 CSS 스타일을 사용한 동일한 예와 아래 코드와 같은 출력이 결과와 함께 표시됩니다.

예:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

로그인 후 복사

Output:

HTML의 가로 메뉴 모음

We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.

Conclusion

Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.

위 내용은 HTML의 가로 메뉴 모음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.