ڊراپ ڊائون مينيو ٺاهيو html ۽ css جي مدد سان.

'ويب ڊيزائيننگ' فورم ۾ شهباز علي زرداري طرفان آندل موضوعَ ‏30 ڊسمبر 2014۔

  1. شهباز علي زرداري

    شهباز علي زرداري
    نئون رڪن

    شموليت:
    ‏7 جولائي 2014
    تحريرون:
    62
    ورتل پسنديدگيون:
    206
    ايوارڊ جون پوائينٽون:
    0
    دوستو جئين ته مان پهرين به مينيو جي حوالي سان پنهنجي تحرير موڪلي چڪو آهيان. اڄ اوهان جي خدمت ۾ ڊراپ ڊائون مينيو ٺاهڻ لاء پنهنجي تحرير توهان جي سامهون رکان ٿو اميد ته پسند ايندي.

    دوستون جئين ته ڊراپ ڊائون ٺاهڻ ايڏو ڏکيو نه آهي پر هڪڙي قسم جي ٽرڪ آهي اميد ٿو رکان اهيا سمجھ ۾ ايندي.

    ويڊيو ڏسڻ لاء هن لنڪ تي ڪلڪ ڪريو.



    ڪوڊ جو لنڪ هي آهي جيڪو ڊاريڪٽ ڊانلوڊ ٿيندو.

    ڪوڊ:
    <!DOCTYPE html>
    <html>
        <head>
    <meta charset="UTF-8" />
            <title>Make Beautiful Drop Down Menus</title>
    <style type="text/css">
        #menu{
            margin: 0px;
            padding: 0px;
        }
        #menu ul{
            margin: 0px;
            padding: 0px;
            line-height: 30px;
        }
        #menu ul li{
            list-style-type: none;
            position: relative;
            float: left;
        }
        #menu a{
            width: 130px;
            height: 30px;
            display: block;
            background: orange;
            text-decoration: none;
            text-align: center;
            color: black;
            font-size: 24px;
            font-family: Arial, Helvetica, sans-serif;
            border: 1px solid gray;
            text-shadow: 2px 1px 2px white;
            border-radius: 5px;
            margin-right: 8px;
        }
        #menu a:hover{
            color: teal;
            background: white;
        }
        #menu ul ul{
            position: absolute;
            visibility: hidden;
            top: 35px;
        }
        #menu ul li:hover ul li{
            visibility: visible;
        }
        #menu ul ul li:hover a:hover{
            color: white;
            background: teal;
            text-shadow: none;
        }
    </style>
        </head>
    <body style="background: pink;">
        <div id="menu">
            <ul>
                <li><a href="#">Product 1</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 2</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 3</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 4</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 5</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 6</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 7</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
                <li><a href="#">Product 8</a>
                    <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
                </li>
               
            </ul>
        </div>
    </body>
    </html>
     
    6 ڄڻن هيء پسند ڪيو آهي.
  2. عبيد ٿهيم

    عبيد ٿهيم سپرايڊيٽر انتظامي رڪن سپر ايڊيٽر

    شموليت:
    ‏17 فيبروري 2013
    تحريرون:
    2,641
    ورتل پسنديدگيون:
    6,901
    ايوارڊ جون پوائينٽون:
    283
    ڌنڌو:
    ڊولپر، سنڌي لئنگئج اٿارٽي، حيدرآباد.
    ماڳ:
    ٽنڊوآدم
    مٺا اها وڊيو جيڪڏهن سنڌي ۾ ترجمو ڪري موڪليو ته وڌيڪ ڀلو.
     
    2 ڄڻن هيء پسند ڪيو آهي.
  3. شهباز علي زرداري

    شهباز علي زرداري
    نئون رڪن

    شموليت:
    ‏7 جولائي 2014
    تحريرون:
    62
    ورتل پسنديدگيون:
    206
    ايوارڊ جون پوائينٽون:
    0
    ادا اها توهان جي صحيح ڳالھ آهي مان ايئن ڪندس پر مان چيو ته اگر سمجھه نه اچي ته ان ۾ ڪوڊ جو اضافو ڪيم وري به مان سنڌي ۾ ٺاهڻ جي ڪوشش ڪندس. آءُ هڪ ٻي به پوري سنڌي ويب سائيٽ ٺاهيندس ان موضوع تي.
     
    3 ڄڻن هيء پسند ڪيو آهي.

هن صفحي کي مشهور ڪريو