Pulse Of The Blogosphere » Tạo Menu Bar – Có Reponsive, Dropdown 2 lớp

HOME / Other / CSS / Tạo Menu Bar – Có Reponsive, Dropdown 2 lớp

Tạo Menu Bar – Có Reponsive, Dropdown 2 lớp

Author: admin - Posted: 15/12/20 - Update: 03/06/23

1. File index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>MediHome Index</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap"
        rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <header>
        <div class="topnav" id="myTopnav">
            <div class="dropdown">
                <div><i class="fa fa-home"></i> Home </div>
            </div>
            <div class="dropdown">
                <div>News</div>
            </div>
            <div class="dropdown">
                <div class="dropdown-title">Dịch vụ</div>
                <div class="dropdown-content">
                    <div class="drop2">
                        <div class="drop2-title">Chăm sóc tại nhà</div>
                        <div class="drop2-content">
                            <div class="drop3">
                                <div class="drop3-title">Nhân viên y tế tại nhà</div>
                            </div>
                            <div class="drop3">
                                <div class="drop3-title">Xét nghiệm tại nhà</div>
                            </div>                          
                        </div>
                    </div>
                    <div class="drop2">
                        <div>Xe cấp cứu</div>
                    </div>
                    <div class="drop2">
                        <div class="drop2-title">Làm đẹp</div>
                        <div class="drop2-content">
                            <div class="drop3">
                                <div class="drop3-title">Tư vấn, chăm sóc da</div>
                            </div>
                            <div class="drop3">
                                <div class="drop3-title">Phẫu thuật thẩm mỹ</div>
                            </div>  
                            <div class="drop3">
                                <div class="drop3-title">Trung tâm MediSpa</div>
                            </div>  
                        </div>
                    </div>
                    <div class="drop2">
                        <div>Phần mềm quản lý bệnh nhân</div>
                    </div>
                </div>
            </div>
            <div class="dropdown">
                <div class="dropdown-title">Thiết bị y tế</div>
                <div class="dropdown-content">
                    <div class="drop2">
                        <div>Thuê máy thở, máy trợ thở</div>
                    </div>
                    <div class="drop2">
                        <div>Cửa hàng thiết bị y tế</div>
                    </div>
                </div>
            </div>
            <div class="dropdown">
                <div class="dropdown-title">Kiến thức y khoa</div>
                <div class="dropdown-content">
                    <div class="drop2">
                        <div>Đột quỵ não</div>
                    </div>
                    <div class="drop2">
                        <div>Dinh dưỡng</div>
                    </div>
                    <div class="drop2">
                        <div>Thở máy tại nhà</div>
                    </div>
                </div>
            </div>
            <div class="dropdown">
                <div>Liên hệ </div>
            </div>
            <div class="dropdown">
                <div>Tìm kiếm </div>
            </div>
            <div class="dropdown icon-menu">
                <div><i class="fa fa-bars"></i></div>
            </div>
        </div>

    </header>
    <main>
    </main>
    <footer>

    </footer>

</body>

</html>

100

101

102

103

104

105

<!DOCTYPE html>

<html>

<head>

<title>MediHome Index</title>

rel="stylesheet">

</head>

<body>

</div>

</div>

</div>

<div class="drop3-title">Xét nghiệm tại nhà</div>

</div>

</div>

</div>

<div class="drop3-title">Phẫu thuật thẩm mỹ</div>

</div>

<div class="drop3-title">Trung tâm MediSpa</div>

</div>

</div>

<div class="dropdown-title">Thiết bị y tế</div>

</div>

<div>Cửa hàng thiết bị y tế</div>

</div>

</div>

<div>Dinh dưỡng</div>

</div>

</div>

</div>

</div>

</div>

</header>

<main>

</main>

</footer>

</body>

</html>

2. File css/style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', Arial, Tahoma, sans-serif;
}

/* ------------------menu-topnav------------------ */

.topnav {
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 17px;
    background-color: #333;
}

.dropdown.icon-menu {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #444;
}

.dropdown:not(:first-child):not(:last-child) {
    cursor: pointer;
    display: none;
}

.dropdown>div:first-child {
    font-size: 17px;
    color: #f2f2f2;
    padding: 14px 16px;
}

.drop2>div:first-child, .drop3>div:first-child {
    font-size: 17px;
    color: black;
    padding: 14px 16px;
}

.dropdown:first-child>div {
    background-color: #4CAF50;
}

.dropdown .dropdown-title:hover, .dropdown-title.active {
    background-color: #444;
}

.drop2:hover>div:first-child, .drop2>.drop2-title.active {
    background-color: #666;
    color: white;
}

.drop3:hover>div:first-child {
    background-color: #888;
    color: white;
}

.dropdown-title::after {
    font-family: "FontAwesome";
    content: '\f067';
    color: #fff;
    float: right;
    margin-left: 5px;
    transition: 0.2s;
}

.dropdown-title.active::after,
.dropdown-title.active.show-hover.clicked::after {
    font-family: "FontAwesome";
    content: '\f068';
    transition: 0.2s;
    transform: rotate(180deg);
}

.drop2-title::after {
    font-family: "FontAwesome";
    content: '\f0da';
    color: black;
    float: right;
    margin-left: 5px;
    transition: 0.2s;
}

.drop2-title:hover::after {
    color: white;
    transition: 0s;
}

.drop2-title.clicked:hover::after {
    color: white;
    transition: 0.2s;
}

.drop2-title.active::after {
    color: white;
    transform: rotate(90deg);
    transition: 0.2s;
}

.drop3-title::before {
    content: '---';
    color: black;
    margin-left: 10px;
    margin-right: 10px;
}
.drop3-title:hover::before{
    color:white;
}

.dropdown-content, .drop2-content {
    display: none;
    position: relative;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* -------------Design for tablets------------- */

@media screen and (min-width: 768px) {}

/* -------------Design for desktop------------- */

@media screen and (min-width: 800px) {
    .topnav {
        flex-direction: row;
    }
    .topnav>div:not(:first-child):not(:last-child) {
        display: block;
        position: relative;
    }
    .dropdown-title::after, .dropdown-title.active.show-hover::after {
        font-family: "FontAwesome";
        content: '\F0D7';
        margin-left: 10px;
        margin-top: 2px;
        transform: rotate(0deg);
    }
    .dropdown-content {
        position: absolute;
        min-width: 250px;
        z-index: 1;
    }
    .dropdown-content>div {
        position: relative;
    }
    .drop2-content {
        position: absolute;
        left: 250px;
        top: 0;
        min-width: 250px;
        z-index: 1;
    }
    .drop2-content a::before {
        content: '---';
        color: black;
        margin-right: 5px;
        margin-left: 5px;
    }
}

/* -------------Design for large desktop------------- */

@media screen and (min-width: 1200px) {}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

* {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

body {

max-width: 1200px;

margin: 0 auto;

font-family: 'Roboto', Arial, Tahoma, sans-serif;

}

/* ------------------menu-topnav------------------ */

.topnav {

display: flex;

flex-direction: column;

position: relative;

font-size: 17px;

background-color: #333;

}

.dropdown.icon-menu {

position: absolute;

right: 0;

top: 0;

background-color: #444;

}

.dropdown:not(:first-child):not(:last-child) {

cursor: pointer;

display: none;

}

.dropdown>div:first-child {

font-size: 17px;

color: #f2f2f2;

padding: 14px 16px;

}

.drop2>div:first-child, .drop3>div:first-child {

font-size: 17px;

color: black;

padding: 14px 16px;

}

.dropdown:first-child>div {

background-color: #4CAF50;

}

.dropdown .dropdown-title:hover, .dropdown-title.active {

background-color: #444;

}

.drop2:hover>div:first-child, .drop2>.drop2-title.active {

background-color: #666;

color: white;

}

.drop3:hover>div:first-child {

background-color: #888;

color: white;

}

.dropdown-title::after {

font-family: "FontAwesome";

content: '\f067';

color: #fff;

float: right;

margin-left: 5px;

transition: 0.2s;

}

.dropdown-title.active::after,

.dropdown-title.active.show-hover.clicked::after {

font-family: "FontAwesome";

content: '\f068';

transition: 0.2s;

transform: rotate(180deg);

}

.drop2-title::after {

font-family: "FontAwesome";

content: '\f0da';

color: black;

float: right;

margin-left: 5px;

transition: 0.2s;

}

.drop2-title:hover::after {

color: white;

transition: 0s;

}

.drop2-title.clicked:hover::after {

color: white;

transition: 0.2s;

}

.drop2-title.active::after {

color: white;

transform: rotate(90deg);

transition: 0.2s;

}

.drop3-title::before {

content: '---';

color: black;

margin-left: 10px;

margin-right: 10px;

}

.drop3-title:hover::before{

color:white;

}

.dropdown-content, .drop2-content {

display: none;

position: relative;

background-color: white;

box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

}

/* -------------Design for tablets------------- */

@media screen and (min-width: 768px) {}

/* -------------Design for desktop------------- */

@media screen and (min-width: 800px) {

.topnav {

flex-direction: row;

}

.topnav>div:not(:first-child):not(:last-child) {

display: block;

position: relative;

}

.dropdown-title::after, .dropdown-title.active.show-hover::after {

font-family: "FontAwesome";

content: '\F0D7';

margin-left: 10px;

margin-top: 2px;

transform: rotate(0deg);

}

.dropdown-content {

position: absolute;

min-width: 250px;

z-index: 1;

}

.dropdown-content>div {

position: relative;

}

.drop2-content {

position: absolute;

left: 250px;

top: 0;

min-width: 250px;

z-index: 1;

}

.drop2-content a::before {

content: '---';

color: black;

margin-right: 5px;

margin-left: 5px;

}

/* -------------Design for large desktop------------- */

@media screen and (min-width: 1200px) {}

3. File js/view.js

$(document).ready(function () {

    $toggleMenuBar(".dropdown");
    $toggleMenuBar(".drop2");

    $('.icon-menu').click(function (e) {
        $(this).parent().children().not(':first,:last').slideToggle(150);
        e.stopPropagation();
    });

    $('body').click(function () {
        if ($(window).width() < 800) {
            $(".topnav").children().not(':first,:last').slideUp(150);
        }
    });
});

$toggleMenuBar = (dropMenu) => {
    $(dropMenu + "-title").click(function (e) {
        if ($(this).hasClass("show-hover")==false||$(this).hasClass("clicked")==true) {
            $(this).toggleClass("active");
            $(this).next().slideToggle(200);
        }

        $(this).addClass("clicked");
        $(dropMenu + "-title.clicked").not($(this)).removeClass("clicked");
        $(this).next().css("z-index", "initial");

        $(dropMenu + "-title.active").not($(this)).next().slideToggle(200);
        $(dropMenu + "-title.active").not($(this)).toggleClass("active");
        e.stopPropagation();
    });

    $(dropMenu).hover(
        function () {
            $title = $(this).children(dropMenu + "-title");
            $content = $(this).children(dropMenu + "-content");
            if ($(window).width() < 800) return;
            if ($title.hasClass("active") == false && $title.hasClass("clicked") == false) {
                $title.addClass("show-hover");
                $title.toggleClass("active");
                $content.toggle();
                $content.css("z-index", "99")
            }
            e.stopPropagation();

        },
        function () {
            $title = $(this).children(dropMenu + "-title");
            $content = $(this).children(dropMenu + "-content");
            if ($(window).width() < 800) {
                $title.removeClass("clicked");
                return;
            }
            if ($title.hasClass("show-hover") == true && $title.hasClass("clicked") == false) {
                $title.toggleClass("active");
                $content.toggle();
                $content.css("z-index", "initial");
            }
            $title.removeClass("show-hover").removeClass("clicked");
            e.stopPropagation();
        }
    );
}

$(document).ready(function () {

$toggleMenuBar(".dropdown");

$toggleMenuBar(".drop2");

$('.icon-menu').click(function (e) {

$(this).parent().children().not(':first,:last').slideToggle(150);

e.stopPropagation();

});

$('body').click(function () {

if ($(window).width() < 800) {

$(".topnav").children().not(':first,:last').slideUp(150);

}

});

$toggleMenuBar = (dropMenu) => {

$(dropMenu + "-title").click(function (e) {

if ($(this).hasClass("show-hover")==false||$(this).hasClass("clicked")==true) {

$(this).toggleClass("active");

$(this).next().slideToggle(200);

}

$(this).addClass("clicked");

$(dropMenu + "-title.clicked").not($(this)).removeClass("clicked");

$(this).next().css("z-index", "initial");

$(dropMenu + "-title.active").not($(this)).next().slideToggle(200);

$(dropMenu + "-title.active").not($(this)).toggleClass("active");

e.stopPropagation();

});

$(dropMenu).hover(

function () {

$title = $(this).children(dropMenu + "-title");

$content = $(this).children(dropMenu + "-content");

if ($(window).width() < 800) return;

if ($title.hasClass("active") == false && $title.hasClass("clicked") == false) {

$title.addClass("show-hover");

$title.toggleClass("active");

$content.toggle();

$content.css("z-index", "99")

}

e.stopPropagation();

function () {

$title = $(this).children(dropMenu + "-title");

$content = $(this).children(dropMenu + "-content");

if ($(window).width() < 800) {

$title.removeClass("clicked");

return;

}

if ($title.hasClass("show-hover") == true && $title.hasClass("clicked") == false) {

$title.toggleClass("active");

$content.toggle();

$content.css("z-index", "initial");

}

$title.removeClass("show-hover").removeClass("clicked");

e.stopPropagation();

}

);

}

1. File index.html

2. File css/style.css

3. File js/view.js

CSS

CSS Reponsive Menu