سلام
من منویی ریسپانسیو ساختم
حالا می خوام وقتی این منو در حالت موبایل هست مانند خود سایت روکش این منو پنهان بشه و با کلیک برروی تصویر یا نوشته ای این منو نمایش داده بشه
منوهای آماده ای رو دیدم که از کدtarget استفاده کرد اما نحوه استفاده از این کد رو نفهمیدم ممنون میشم راهنمایی کنید
این کدهایی که خودم مشاهده کردم اما نمیدونم اگه خودم بخوام از اول بسازم چطوری باید عمل بکنم
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="nav" role="navigation">
نمایش
پنهان نمودن
<ul class="clearfix">
خانه
</nav>
</body>
</html>
body
{
background-color: #f7efeb;
padding: 1.25em; /* 20 */
}
#nav
{
width: 60em; /* 1000 */
font-weight: 400;
position: absolute;
top: 25%;
right: 50%;
margin-right: -30em; /* 30 480 */
direction:rtl;
}
#nav > a
{
display: none;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
right: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: right;
text-indent: -9999px;
background-color: #000000;
position: relative;
}
#nav > a:last-of-type{
background: #e9293f;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
