ابدأ بالتواصل مع الأشخاص وتبادل معارفك المهنية

أنشئ حسابًا أو سجّل الدخول للانضمام إلى مجتمعك المهني.

متابعة

What are the HTML elements and attributes , CSS properties , jQuery functions you can use to make the following navbar ?

user-image
تم إضافة السؤال من قبل مستخدم محذوف‎
تاريخ النشر: 2015/10/02
مستخدم محذوف‎
من قبل مستخدم محذوف‎

Basm allah alrahman alrahim

 

<html>

<head>

<title>Navigation Menu2 levels</title>

    <style type="text/css">

    ul ,li {margin:0;padding:0;}

    .nav li {        float: left;  list-style: none;    background: #222;    }

    .nav a {        color: #fff; background: #222;  padding:0px30px;  text-decoration: none;    }

    .nav ul ul {        display: none;        }

    .nav ul ul li  {        float: none;    }

    .nav li:hover ul {        display: block;        position: absolute;    }

    .nav a:hover {        color: #000;        background: #eee;    }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

                <div class="main ">

                <div class="nav">

                <ul>

                    <li><a href="">home</a></li>

                    <li><a href="">about</a></li>

                    <li><a href="">blogs</a>

                        <ul>

                            <li><a href="">article1</a></li>

                            <li><a href="">article2</a></li>

                            <li><a href="">article3</a></li>

                            <li><a href="">article</a></li>

                            <li><a href="">sitemap</a></li>

                        </ul>

                            </li>

                    <li><a href="">hello</a>

                        <ul>

                            <li><a href="">world1</a></li>

                            <li><a href="">world2</a></li>

                            <li><a href="">world3</a></li>

                            <li><a href="">world4</a></li>

                            <li><a href="">sitemap</a></li>

                        </ul>

                            </li>

                    <li><a href="">sitemap</a></li>

                </ul>

            </div>

        </div>                    

<div class="footer"></div>

 

</div>

</body></html>

Razaan Ahmed
من قبل Razaan Ahmed , Software Developer , Bioelite Vert SRL.Romania

Can use an HTML Table structure or a DIV/SPAN Structure which will be more time consuming when compared to table structure which uses <tr> and <td>

 

Css/css3 can be used to apply the design works done on the Menu bar.Menu and Child elements can be animated using Javascript and jQuery.I prefer jQuery since it has more smoother,lot of animation,events and less code usage to achieve the work done.

 

Yeap,another way of  completing the task is by use the frameworks like bootstrap which reduces the work on css and jquery and its less time consuming with predefined designs and functions,when compared to the traditional method i mentioned.

 

مستخدم محذوف‎
من قبل مستخدم محذوف‎

You don't need JQuery. Use CSS3 and :hover. You can use as well ready bootstrap snippets or Hexham Hussain's example.