در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #32863

    amour
    مشارکت کننده

    سلام
    من منویی ریسپانسیو ساختم
    حالا می خوام وقتی این منو در حالت موبایل هست مانند خود سایت روکش این منو پنهان بشه و با کلیک برروی تصویر یا نوشته ای این منو نمایش داده بشه
    منوهای آماده ای رو دیدم که از کد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;
    }
    }

در حال نمایش 1 نوشته (از کل 1)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.