| 제목 | 풀다운 메뉴(pulldown menu) css, js | ||
|---|---|---|---|
| 글쓴이 | darkninja | 작성시각 | 2023/05/13 22:45:28 |
|
|
|||
|
구시대의 유물인 풀다운 메뉴(pulldown menu) 입니다. 참고. https://github.com/codrops/Blueprint-HorizontalDropDownMenu/blob/master/js/cbpHorizontalMenu.js https://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/ https://codyhouse.co/gem/mega-dropdown 10년쯤 묵은 코드인데 이제서야 개선할 실력이 되었네요. 참고한 소스중에 사라진 분도 계시고... 소스부분을 수정하면 정상적인 동작이 안될 가능성이 아주 많습니다 분석을 먼저 하신 후에 사용 바랍니다.
github 에 보관창고를 마련했습니다. https://github.com/darkninjaaa index.php
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="menu.css"; />
<style type="text/css" media="screen">
html,
body {
margin: 0;
height: 100%;
font-family: "맑은 고딕", "Malgun Gothic", "나눔고딕", "NanumGothic", "굴림", "Gulim", "Tahoma", "Verdana", "sans-serif";
}
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
display: table;
clear: both;
}
.clearfix8:after { /* if you don't require IE...8 support, the following is fine too: */
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div id="nav-button" class="nav-button">nav button</div>
<ul id="nav-ul" class="nav-ul submenu">
<li><a href="/" hyperlink="true" target_blank="true"><span>Home</span></a></li>
</li>
<li><a><span class="hassubmenu">php</span></a>
<ul class="submenu">
<li><a href="file"><span>File</span></a></li>
<li><a href="image"><span>Image</span></a></li>
<li><a href="json"><span>Json</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">BLOG</span></a>
<ul class="submenu">
<li><a><span>HTML</span></a></li>
<li class="dropright"><a><span class="hassub">Design</span></a>
<ul>
<li><a><span>HTML</span></a></li>
<li><a><span>CSS</span></a></li>
<li class="dropright"><a><span class="hassub">Design</span></a>
<ul>
<li><a><span>Design</span></a></li>
<li class="dropright"><a><span class="hassub">HTML</span></a>
<ul>
<li class="dropright"><a><span class="hassub">ul class="submenu"</span></a>
<ul>
<li><a><span>who am i</span></a>
<li><a><span>who are u</span></a>
<li><a><span>who is dog</span></a>
</ul>
</li>
<li><a><span>li class="dropright"</span></a></li>
<li><a><span>span class="hassub"</span></a></li>
</ul>
</li>
<li><a><span>CSS</span></a></li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span>CSS</span></a></li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">Work</span></a>
<ul class="submenu">
<li><a><span>Web Design</span></a></li>
<li><a><span>Typography</span></a></li>
<li><a><span>Front-End</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">Etc</span></a>
<ul class="submenu">
<div class="menucolumns">
<div class="menucolumn-12 clearfix">
<div class="menucol-12 menucol highlighted">
<div class="menucol-inner">
Tomatoes
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>abc</h5>
<ul>
<li><a target="_blank" href="https://www.youtube.com/results?search_query=grafting+tree">grafting tree</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>def</h5>
<ul>
<li><a>Apple</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>ghi</h5>
<ul>
<li><a>Banana</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>zzz</h5>
<ul>
<li><a>Grape</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</li>
<li><a><span>About</span></a></li>
<div class="menu_right">
who am i ?
</div>
</ul>
</div>
<script type="text/javascript" src="menu.js"></script>
<script>
let menu = new Menu({
nav_button : "nav-button",
nav_ul : "nav-ul"
});
</script>
</body>
</html>
menu.css
/* menu-sub */
.submenuopen .submenu {
display: block;
}
.menu_right {
float: right;
padding: 0px 3px 0px 0px;
}
.menu_right form,
.menu_right form span {
font-size: 12px;
}
.nav {
position: relative;
}
.nav-button {
display: none;
}
.nav-ul {
display: block;
position: relative;
width: 100%;
z-index:5555;
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
letter-spacing: 0px;
word-spacing: 0px;
white-space: nowrap;
border-bottom: 0px solid #777;
font-size: 16px;
background: #acacac;
}
.nav ul li {
position:relative;
display: block;
color: #fff;
list-style: none;
font-size: 16px;
}
.nav ul li span {
font-size: 16px;
}
.nav a {
text-decoration: none;
}
.nav ul li a {
padding: 0 10px 0 10px;
color:#111;
text-decoration: none;
}
.nav-ul li.submenuopen > a {
color: #333;
background: #47a3da;
}
.nav-ul li.submenuopen > a:hover {
color: #eee;
background: #47a3da;
}
/* first level */
.nav-ul > li:hover > a {
color: #888;
background: #e9e9e9;
}
.nav-ul.submenu {
position:relative;
float: left;
}
.nav-ul.submenu > li {
float: left;
margin: 0px 0px 0px 0px;
display: inline;
}
.nav-ul.submenu > li .hassubmenu:after {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -5px;
}
/* second level */
.nav-ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
background: #bbb;
z-index:7777;
padding: 2px;
min-width: 110px;
}
.nav-ul li.submenuopen > ul {
background: #bbb;
}
.nav-ul li:hover > ul {
display: block;
background: #ccc;
z-index:9999;
}
.nav-ul li:hover > ul li a {
display: block;
}
.nav-ul li > ul li a:hover {
color: #888;
background: #e9e9e9;
}
.nav-ul li > ul li .hassub:after {
content: '+';
/*position: absolute;*/
top: 50%;
right: 5px;
margin-top: -11px;
}
.nav-ul > li > ul.submenu {
position: absolute;
top: 100%;
left: 0;
}
.nav-ul > li > ul.submenu .menucolumns { /*do not set background-color*/
padding: 0 5px 5px 0;
}
.nav-ul > li > ul.submenu .menucolumns ul li a:hover {
color: #333;
background: #f5f5f5;
}
.nav-ul > li > ul.submenu .menucolumns .highlighted {
background: #9f9f9f;
border: 1px solid #c1c1c1;
}
/* third level */
.nav-ul .dropright ul {
display: none;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
background: #ccc;
z-index:8888;
}
/* more level */
.nav-ul .dropright ul ul {
background: #c7c7c7;
}
.menucolumn-1 {width: 55px;}
.menucolumn-2 {width: 110px;}
.menucolumn-3 {width: 165px;}
.menucolumn-4 {width: 220px;}
.menucolumn-5 {width: 275px;}
.menucolumn-6 {width: 330px;}
.menucolumn-7 {width: 385px;}
.menucolumn-8 {width: 440px;}
.menucolumn-9 {width: 495px;}
.menucolumn-10 {width: 550px;}
.menucolumn-11 {width: 605px;}
.menucolumn-12 {width: 660px;}
.menucolumn-13 {width: 715px;}
.menucolumn-14 {width: 770px;}
.menucolumn-15 {width: 825px;}
.menucolumn-16 {width: 880px;}
.menucolumn-17 {width: 935px;}
.menucolumn-18 {width: 990px;}
.menucolumn-19 {width: 1045px;}
.menucolumn-20 {width: 1100px;}
.menucol-1 { width:50px; }
.menucol-2 { width:105px; }
.menucol-3 { width:160px; }
.menucol-4 { width:215px; }
.menucol-5 { width:270px; }
.menucol-6 { width:325px; }
.menucol-7 { width:380px; }
.menucol-8 { width:435px; }
.menucol-9 { width:490px; }
.menucol-10 { width:545px; }
.menucol-11 { width:600px; }
.menucol-12 { width:655px; }
.menucol-13 { width:710px; }
.menucol-14 { width:765px; }
.menucol-15 { width:820px; }
.menucol-16 { width:875px; }
.menucol-17 { width:930px; }
.menucol-18 { width:985px; }
.menucol-19 { width:1040px; }
.menucol-20 { width:1095px; }
.menucol-1, .menucol-2, .menucol-3, .menucol-4, .menucol-5, .menucol-6, .menucol-7, .menucol-8, .menucol-9, .menucol-10, .menucol-11, .menucol-12, .menucol-13, .menucol-14, .menucol-15, .menucol-16, .menucol-17, .menucol-18, .menucol-19, .menucol-20 {
display:inline-block;
float: left;
position: relative;
margin: 5px 0 0 5px;
background: #aaa;
}
.menucol-inner {
padding: 5px;
}
.submenu {
font-size: 16px;
}
.submenu h3 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 120%;
}
.submenu h4 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 110%;
}
.submenu h5 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 100%;
}
/* Examples for media queries */
@media screen and (max-width: 35em) {
.nav {
position: relative;
}
.nav-button {
display: block;
cursor: pointer;
font-size: 110%;
font-weight: 700;
margin: 0;
padding: 5px;
background: #39b1cc;
}
.nav-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 3px solid #d3eced;
right: 7px;
top: 8px;
}
.nav-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 3px solid #d3eced;
border-bottom: 3px solid #d3eced;
right: 7px;
top: 14px;
}
.nav-ul {
height: auto;
display: none;
position: relative;
white-space: nowrap;
}
.nav-ul.open {
display: block;
}
.nav-ul li a {
padding: 0 10px 0 10px;
}
.submenu li {
display: block;
}
.menu_right {
float:none;
}
.menu_right form {
padding: 0 0;
}
/* first level */
.nav-ul li {
float: none;
}
.nav-ul.submenu {
position:relative;
}
.nav-ul.submenu > li {
position:relative;
display: block;
float: none;
padding: 0;
}
/* second level */
.nav-ul li > ul {
position: static;
display: none;
}
.nav-ul li > ul.submenu {
position:relative;
top: 0;
left: 0;
}
.nav-ul li > ul.submenu .menucolumns {
margin: 0px 0 0 0;
padding: 0 2px 0 0;
}
/* third level */
.nav-ul .dropright ul {
position: static;
padding: 0 0 0 3px;
}
/* more level */
.nav-ul .dropright ul ul {
}
.menucol-1, .menucol-2, .menucol-3, .menucol-4, .menucol-5, .menucol-6, .menucol-7, .menucol-8, .menucol-9, .menucol-10, .menucol-11, .menucol-12, .menucol-13, .menucol-14, .menucol-15, .menucol-16, .menucol-17, .menucol-18, .menucol-19, .menucol-20 {
float: none;
width: auto;
margin: 2px 0 2px 2px;
}
.menucolumn-1, .menucolumn-2, .menucolumn-3, .menucolumn-4, .menucolumn-5, .menucolumn-6, .menucolumn-7, .menucolumn-8, .menucolumn-9, .menucolumn-10, .menucolumn-11, .menucolumn-12, .menucolumn-13, .menucolumn-14, .menucolumn-15, .menucolumn-16, .menucolumn-17, .menucolumn-18, .menucolumn-19, .menucolumn-20 {
width: auto;
}
.nav-ul > li > ul.submenu .menucolumns .menucol {
position:relative;
display: block;
float: none;
padding: 0;
}
}
menu.js
/**
* Menu.js v1.0.0
*/
var MENU_NAV_BUTTON = "nav-button"
var MENU_NAV_UL = "nav-ul"
var _typeof =
typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ?
function(obj) { return typeof obj; } :
function(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var _createClass = function() {
function defineProperties(target, props)
{
for (var i = 0; i < props.length; i++)
{
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor)
{
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Menu = function()
{
function Menu()
{
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Menu);
_extends(this, {
nav_button: MENU_NAV_BUTTON, /* id */
nav_ul: MENU_NAV_UL /* id */
}, options);
this.LastselectedulLi = null;
this.init();
}
_createClass( Menu,
[
{
key: "init",
value: function init() {
this.setListner_Navclick();
this.setListner_NavUlLiclick();
this.setListner_bodyclick();
this.setListner_bodykeyup();
}
},
{
key: "setListner_Navclick",
value: function setListner_Navclick() {
var _thisNavclick = this;
var nav_button = document.getElementById(_thisNavclick.nav_button);
nav_button.addEventListener('click', function(event) {
event.preventDefault();
var nav_ul = document.getElementById(_thisNavclick.nav_ul);
if (nav_ul.classList.contains('open')) {
nav_ul.classList.remove('open');
}
else {
nav_ul.classList.add('open');
}
return false;
} );
}
},
{
key: "setListner_NavUlLiclick",
value: function setListner_NavUlLiclick() {
var _thisNavUlLi = this;
var menuItems = document.querySelectorAll("#"+_thisNavUlLi.nav_ul+" > li > a > span")
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function(event) {
event.preventDefault();
_thisNavUlLi.NavUlLi_open(event);
return false;
} );
}
}
},
{
key: "NavUlLi_open",
value: function NavUlLi_open(event) {
var itemulLi = event.target.parentNode.parentNode;
if( this.LastselectedulLi !== null ) {
if (this.LastselectedulLi.classList.contains('submenuopen')) {
this.LastselectedulLi.classList.remove('submenuopen');
}
}
if( this.LastselectedulLi == itemulLi ) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
this.LastselectedulLi = null;
}
else {
if (event.target.parentNode.getAttribute('hyperlink') != "true") {
itemulLi.classList.add('submenuopen');
this.LastselectedulLi = itemulLi;
}
}
if (event.target.parentNode.getAttribute('hyperlink') == "true") {
if (event.target.parentNode.getAttribute('target_blank') == "true")
window.open(event.target.parentNode.getAttribute('href'));
else
location.href = event.target.parentNode.getAttribute('href');
}
}
},
{
key: "setListner_bodyclick", //display: none; nav-ul > li > ul
value: function setListner_bodyclick() {
var _thisbodyclick = this;
var body = document.body;
body.addEventListener('click', function(event) {
var itemulLi = _thisbodyclick.LastselectedulLi;
// event.target.closest('.')
// event.target.parentNode.querySelector('.')
if (itemulLi !== null && ! itemulLi.contains(event.target.parentNode)) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
_thisbodyclick.LastselectedulLi = null;
}
} );
}
},
{
key: "setListner_bodykeyup", //display: none; nav-ul > li > ul
value: function setListner_bodykeyup() {
var _thisbodykeyup = this;
var body = document.body;
body.addEventListener('keyup', function(event) {
if (event.code == 'Escape') {
var itemulLi = _thisbodykeyup.LastselectedulLi;
if (itemulLi !== null) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
_thisbodykeyup.LastselectedulLi = null;
}
}
} );
}
}
]
);
return Menu;
}();
if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object') {
module.exports = Menu;
}
|
|||
| 다음글 | ajaxcall - How can I make an A... | ||
| 이전글 | ci4 초 간단 csv 작성 [한글 안깨짐] | ||
| 없음 |