Bayt.com

Communiquez avec les autres et partagez vos connaissances professionnelles

Inscrivez-vous ou connectez-vous pour rejoindre votre communauté professionnelle.

Suivre

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

Web Development JavaScript HTML HTML + CSS Cascading Style Sheets CSS
user-image
Question ajoutée par Utilisateur supprimé
Date de publication: 2015/10/02
Apprécier (53) Vues (14) Suiveurs (54) Réponses (3) Report Question
Ajoutez Une Réponse
Inscrivez-vous ou connectez-vous pour répondre.
Utilisateur supprimé

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
par Razaan Ahmed , Senior Software Engineer , Ecoz Labs Softwares (Pvt) Ltd

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.

 

Utilisateur supprimé

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

Ecrivez Votre Réponse
More Questions Like This

Avez-vous besoin d'aide pour créer un CV ayant les mots-clés recherchés par les employeurs?

Obtenir de l'aide