تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

منو بازشونده

آسان 916/ دانلود 108 بازدید

با HTML و CSS منویی بسازید وقتی موس روی آن قرار گرفت زیر منو باز شود و کاربر بتواند از گزینه های زیر منو، هرکدام را انتخاب کرده و وارد لینک مربوطه شود

👨‍💻 15 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

3 جواب

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منوی کشویی</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: none;
        }
        ul:hover{
            display: block;
        }
        li a{
            width: 300px;
            display: inline-block;
            padding: 15px;
            background-color: rgb(54, 54, 233);
            color: white;
            text-decoration: none;
            box-sizing: border-box;
        }
        li:hover a{
            background-color: rgb(121, 157, 203);
            color:rgb(54, 54, 233) ;
        }
        #menu{
            width: 300px;
            padding: 8px;
            box-sizing: border-box;
            background-color: rgb(7, 117, 251);
        }
        #menu:hover+ul{
            display: block;

        }
    </style>
</head>
<body>
    <div id="menu">
        Menu
    </div>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">profile</a></li>
        <li><a href="#">log out</a></li>
    </ul>
Hadi.jalooli دانلود HTML & CSS 
C S S____________________________________
  <style>   
  /******important*****/ 
  ul{
    width: 200px;
    height: 40px;
    background: rgb(13, 168, 152);
    align-content: center;
    text-align: center;
    padding: 0;
    list-style-type: none;
    border-radius: 5px;
    user-select: none;
    font-weight: 1000;}
      
  li{display: none;}
        
  ul:hover li{
    display:block;
    width: 100%;
    background-color: rgb(46, 123, 116);}
    
  a{
    display: block;
    text-decoration: none;
    color: rgb(248, 248, 248);}
    
  /******unimportant*****/  
  ul:hover{
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 5px white, -2px -2px 5px white;}
      
  ul:hover li{text-shadow: none;}
              
  a:hover{
    letter-spacing: 2px;
    zoom: 120%;
    width: 100%;
    border-bottom: 1px solid rgb(236, 223, 223);}
  </style>

H T M L_______________________________________________
  <ul>
    ⥼ M U N U ⥽
    <li><a href="#">one  </a></li>
    <li><a href="#">twe  </a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four </a></li>
  </ul>
Unun..ali..nunu دانلود HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منوی کشویی</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        /* استایل منو */
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            float: right;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* استایل زیرمنو */
        .dropdown {
            float: right;
            overflow: hidden;
        }

        .dropdown .dropbtn {
            cursor: pointer;
            padding: 14px 16px;
            background-color: #333;
            color: white;
            border: none;
            outline: none;
            font-size: 16px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            text-align: left;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

        .dropdown:hover .dropdown-content {
            display: block; /* نمایش زیرمنو هنگام هاور */
        }
    </style>
</head>
<body>

    <div class="navbar">
        <a href="#home">خانه</a>
        <a href="#about">درباره ما</a>
        <div class="dropdown">
            <button class="dropbtn">خدمات</button>
            <div class="dropdown-content">
                <a href="#service1">خدمات 1</a>
                <a href="#service2">خدمات 2</a>
                <a href="#service3">خدمات 3</a>
            </div>
        </div>
        <a href="#contact">تماس با ما</a>
    </div>

</body>
</html>
Mma123 دانلود HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن