ساخت منوی ریسپانسیو

این تاپیک 1 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  پدرام میر ،‏ 2 ماه و 1 هفته پیش .

۶۳۲ visibility

تگ شده :  , ,

نویسنده پست
دوشنبه ، ۳ آبان ۱۳۹۵     ۲:۴۴ ق.ظ #


رضا علی رحیمی

Subscriber
0 پست2 تاپیک

 

سلام
من منویی ریسپانسیو ساختم
حالا می خوام وقتی این منو در حالت موبایل هست مانند خود سایت 7لرن این منو پنهان بشه و با کلیک برروی تصویر یا نوشته ای این منو نمایش داده بشه
منوهای آماده ای رو دیدم که از کدtarget استفاده کرد اما نحوه استفاده از این کد رو نفهمیدم ممنون میشم راهنمایی کنید
این کدهایی که خودم مشاهده کردم اما نمیدونم اگه خودم بخوام از اول بسازم چطوری باید عمل بکنم

(درضمن ممنون میشم فقط باcss htmlاین کار انجام بشه)

HTML

<code>

0  تشکر
چهارشنبه ، ۱۷ آبان ۱۳۹۶     ۱۲:۳۲ ق.ظ #


پدرام میر

Subscriber
1 پست0 تاپیک

<!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" rel="nofollow" rel="nofollow" href="style.css" />
</head>

<body>
<nav id="nav" role="navigation">
    <a rel="nofollow" rel="nofollow" href="#nav" title="Show navigation">نمایش</a>
    <a rel="nofollow" rel="nofollow" href="#" title="Hide navigation">پنهان نمودن</a>
    <ul class="clearfix">
        <li><a rel="nofollow" rel="nofollow" href="?home">خانه</a></li>
    </ul>
</nav>

</body>

</html>
</code>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

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;
    }
}

0  تشکر
پست 1 تا 2 (از مجموع 2 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .