- نویسندهنوشته ها
- ۰۳ آبان ۱۳۹۵ در ۰۲:۳۷ #32863
سلام
من منویی ریسپانسیو ساختم
حالا می خوام وقتی این منو در حالت موبایل هست مانند خود سایت روکش این منو پنهان بشه و با کلیک برروی تصویر یا نوشته ای این منو نمایش داده بشه
منوهای آماده ای رو دیدم که از کد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;
}
}
- نویسندهنوشته ها
انجمن ‘HTML – CSS’ برای جستار ها و پاسخ ها جدید بسته است.