TIP게시판

제목 풀다운 메뉴(pulldown menu) css, js
글쓴이 darkninja 작성시각 2023/05/13 22:45:28
댓글 : 0 추천 : 0 스크랩 : 0 조회수 : 7030   RSS

구시대의 유물인  풀다운 메뉴(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... (1)
 이전글 ci4 초 간단 csv 작성 [한글 안깨짐]

댓글

없음