content logo

React Menus:

Under and Over Menu on Hover with React JS

If you have a website and would like to change its design, this post is available for the same purpose. In this post, we are going to introduce the Under and Over Menu on Hover with React JS and its different designs. You can use this Simple React Menu Code on different kinds of websites to classify and categorize all contents. So, you are able to change the design of your website with the help of this Javascript Menu with Effect and attract more viewers as well. Additionally, if you utilize this code on your website, viewers can access data quickly and easily.

We have prepared the preview of this HTML Under Menu for you to realize its performance. As you see below, this Free Menu Source Code has a white background with black writings. There are two blue buttons in this code with white writing that contains two menus for websites. These two buttons are the HTML Over Menu and the under menu. When you put the mouse's cursor on the under menu, sub-categories will appear under the button. When you put the cursor of the mouse on the Over Menu, sub-categories will be displayed above the button.

#

Simple React Menu Code

#

Javascript Menu with Effect

#

HTML Under Menu

#

HTML Over Menu

#

Free Menu Source Code

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
:root {
	--font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
	--marginMenuToPopup: 10px;
}
html, button {
	font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
	font-family: var(--font-family);
}
main {
	margin: 1em auto;
	min-height: 100vh;
	max-width: 30em;
	padding: 0 3em;
	line-height: 1.5;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.3em;
}
.Menu {
	margin: 0;
	padding-left: 0;
	list-style: none;
	white-space: nowrap;
	text-align: center;
}
.Menu button {
	border: 0;
	background: none;
}
.Menu li+li {
	margin-top: 0.5em;
}
.PopupMenuWrapper.-under {
	padding-bottom: 8em;
}
.PopupMenuWrapper.-over {
	padding-top: 8em;
}
.PopupMenu {
	position: relative;
	display: inline-block;
}
.PopupMenu__inner {
	display: flex;
	justify-content: center;
}
.PopupMenu__Button {
	padding: 0.5em 1.5em;
	border: 0;
	border-radius: 3em;
	background-color: midnightblue;
	color: #fff;
}
.PopupMenu__Menu {
	align-self: center;
	position: absolute;
	bottom: calc(2.5em + 10px);
	bottom: calc(2.5em + var(--marginMenuToPopup));
	/* button height + margin */
	padding: 0.5em;
	border-radius: 2px;
	background-color: color(midnightblue a(25%));
}
.PopupMenu__Menu.-under {
	top: calc(2.5em + 10px);
	top: calc(2.5em + var(--marginMenuToPopup));
	bottom: auto;
}
.PopupMenu__Menu:not([aria-hidden="true"]) {
	transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, visibility 0.15s;
}
.PopupMenu__Menu[aria-hidden="true"] {
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out, visibility 0s ease 0.1s;
}
.PopupMenu__Menu.-under[aria-hidden="true"] {
	transform: translateY(-10px);
}
.PopupMenu__Menu::before {
	content: "";
	position: absolute;
	display: block;
	bottom: -1em;
	width: 100%;
	height: 1em;
}
.PopupMenu__Menu.-under::before {
	top: -1em;
	bottom: auto;
}
.PopupMenu__Menu::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: calc(10px * -2);
	bottom: calc(var(--marginMenuToPopup) * -2);
	display: block;
	height: 0;
	width: 0;
	margin: auto;
	border: 10px solid transparent;
	border: var(--marginMenuToPopup) solid transparent;
	border-top-color: color(midnightblue a(25%));
}
.PopupMenu__Menu.-under::after {
	top: calc(10px * -2);
	top: calc(var(--marginMenuToPopup) * -2);
	bottom: 0;
	bottom: auto;
	border-color: transparent;
	border-bottom-color: color(midnightblue a(25%));
}
class PopupMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShownMenu: false
        };
        this.onClickButton = this.onClickButton.bind(this);
        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseLeave = this.onMouseLeave.bind(this);
    }
    onClickButton() {
        this.setState({
            isShownMenu: !this.state.isShownMenu
        });
    }
    onMouseEnter() {
        this.setState({
            isShownMenu: true
        });
    }
    onMouseLeave() {
        this.setState({
            isShownMenu: false
        });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", {
                className: "PopupMenu",
                "aria-expanded": this.state.isShownMenu,
                onMouseEnter: this.onMouseEnter,
                onMouseLeave: this.onMouseLeave
            }, /*#__PURE__*/
                React.createElement("div", { className: "PopupMenu__inner" }, /*#__PURE__*/
                    React.createElement("button", {
                        type: "button",
                        "aria-haspopup": "true",
                        "aria-controls": this.props.id,
                        className: "PopupMenu__Button",
                        onClick: this.onClickButton
                    },
                        this.props.title), /*#__PURE__*/
                    React.createElement("div", {
                        id: this.props.id,
                        className: `PopupMenu__Menu -${this.props.position}`,
                        "aria-hidden": !this.state.isShownMenu,
                        "aria-label": this.props.menuLabel
                    },
                        this.props.children))));
    }
}
PopupMenu.defaultProps = {
    position: 'over',
    title: 'Menu'
};
class Container extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("main", null, /*#__PURE__*/
                React.createElement("h1", null, "React component, hover and keyboard"), /*#__PURE__*/
                React.createElement("section", null, /*#__PURE__*/
                    React.createElement("h2", null, "Under Menu"), /*#__PURE__*/
                    React.createElement("div", { className: "PopupMenuWrapper -under" }, /*#__PURE__*/
                        React.createElement(PopupMenu, { id: "PopupMenuUnder", menuLabel: "Menu Under", title: "Menu", position: "under" }, /*#__PURE__*/
                            React.createElement("ul", { className: "Menu" }, /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem2")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem")))))), /*#__PURE__*/
                React.createElement("section", null, /*#__PURE__*/
                    React.createElement("h2", null, "Over Menu"), /*#__PURE__*/
                    React.createElement("div", { className: "PopupMenuWrapper -over" }, /*#__PURE__*/
                        React.createElement(PopupMenu, { id: "PopupMenuOver", menuLabel: "Menu Over" }, /*#__PURE__*/
                            React.createElement("ul", { className: "Menu" }, /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Awesome Menu Item")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Cool Menu Item")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Smart Menu Item"))))))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(Container, null),
    document.getElementById('app'));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<style>
:root {
	--font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
	--marginMenuToPopup: 10px;
}
html, button {
	font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
	font-family: var(--font-family);
}
main {
	margin: 1em auto;
	min-height: 100vh;
	max-width: 30em;
	padding: 0 3em;
	line-height: 1.5;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.3em;
}
.Menu {
	margin: 0;
	padding-left: 0;
	list-style: none;
	white-space: nowrap;
	text-align: center;
}
.Menu button {
	border: 0;
	background: none;
}
.Menu li+li {
	margin-top: 0.5em;
}
.PopupMenuWrapper.-under {
	padding-bottom: 8em;
}
.PopupMenuWrapper.-over {
	padding-top: 8em;
}
.PopupMenu {
	position: relative;
	display: inline-block;
}
.PopupMenu__inner {
	display: flex;
	justify-content: center;
}
.PopupMenu__Button {
	padding: 0.5em 1.5em;
	border: 0;
	border-radius: 3em;
	background-color: midnightblue;
	color: #fff;
}
.PopupMenu__Menu {
	align-self: center;
	position: absolute;
	bottom: calc(2.5em + 10px);
	bottom: calc(2.5em + var(--marginMenuToPopup));
	/* button height + margin */
	padding: 0.5em;
	border-radius: 2px;
	background-color: color(midnightblue a(25%));
}
.PopupMenu__Menu.-under {
	top: calc(2.5em + 10px);
	top: calc(2.5em + var(--marginMenuToPopup));
	bottom: auto;
}
.PopupMenu__Menu:not([aria-hidden="true"]) {
	transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, visibility 0.15s;
}
.PopupMenu__Menu[aria-hidden="true"] {
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out, visibility 0s ease 0.1s;
}
.PopupMenu__Menu.-under[aria-hidden="true"] {
	transform: translateY(-10px);
}
.PopupMenu__Menu::before {
	content: "";
	position: absolute;
	display: block;
	bottom: -1em;
	width: 100%;
	height: 1em;
}
.PopupMenu__Menu.-under::before {
	top: -1em;
	bottom: auto;
}
.PopupMenu__Menu::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: calc(10px * -2);
	bottom: calc(var(--marginMenuToPopup) * -2);
	display: block;
	height: 0;
	width: 0;
	margin: auto;
	border: 10px solid transparent;
	border: var(--marginMenuToPopup) solid transparent;
	border-top-color: color(midnightblue a(25%));
}
.PopupMenu__Menu.-under::after {
	top: calc(10px * -2);
	top: calc(var(--marginMenuToPopup) * -2);
	bottom: 0;
	bottom: auto;
	border-color: transparent;
	border-bottom-color: color(midnightblue a(25%));
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class PopupMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShownMenu: false
        };
        this.onClickButton = this.onClickButton.bind(this);
        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseLeave = this.onMouseLeave.bind(this);
    }
    onClickButton() {
        this.setState({
            isShownMenu: !this.state.isShownMenu
        });
    }
    onMouseEnter() {
        this.setState({
            isShownMenu: true
        });
    }
    onMouseLeave() {
        this.setState({
            isShownMenu: false
        });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", {
                className: "PopupMenu",
                "aria-expanded": this.state.isShownMenu,
                onMouseEnter: this.onMouseEnter,
                onMouseLeave: this.onMouseLeave
            }, /*#__PURE__*/
                React.createElement("div", { className: "PopupMenu__inner" }, /*#__PURE__*/
                    React.createElement("button", {
                        type: "button",
                        "aria-haspopup": "true",
                        "aria-controls": this.props.id,
                        className: "PopupMenu__Button",
                        onClick: this.onClickButton
                    },
                        this.props.title), /*#__PURE__*/
                    React.createElement("div", {
                        id: this.props.id,
                        className: `PopupMenu__Menu -${this.props.position}`,
                        "aria-hidden": !this.state.isShownMenu,
                        "aria-label": this.props.menuLabel
                    },
                        this.props.children))));
    }
}
PopupMenu.defaultProps = {
    position: 'over',
    title: 'Menu'
};
class Container extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("main", null, /*#__PURE__*/
                React.createElement("h1", null, "React component, hover and keyboard"), /*#__PURE__*/
                React.createElement("section", null, /*#__PURE__*/
                    React.createElement("h2", null, "Under Menu"), /*#__PURE__*/
                    React.createElement("div", { className: "PopupMenuWrapper -under" }, /*#__PURE__*/
                        React.createElement(PopupMenu, { id: "PopupMenuUnder", menuLabel: "Menu Under", title: "Menu", position: "under" }, /*#__PURE__*/
                            React.createElement("ul", { className: "Menu" }, /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem2")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "MenuItem")))))), /*#__PURE__*/
                React.createElement("section", null, /*#__PURE__*/
                    React.createElement("h2", null, "Over Menu"), /*#__PURE__*/
                    React.createElement("div", { className: "PopupMenuWrapper -over" }, /*#__PURE__*/
                        React.createElement(PopupMenu, { id: "PopupMenuOver", menuLabel: "Menu Over" }, /*#__PURE__*/
                            React.createElement("ul", { className: "Menu" }, /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Awesome Menu Item")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Cool Menu Item")), /*#__PURE__*/
                                React.createElement("li", null, /*#__PURE__*/React.createElement("button", { type: "button" }, "Smart Menu Item"))))))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(Container, null),
    document.getElementById('app'));
</script>

</body>
</html>
Preview