Results 1 to 7 of 7

Thread: [RESOLVED] Issue in creating Drop Down Menu

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    May 2004
    Location
    Quetta-Pakistan
    Posts
    852

    Resolved [RESOLVED] Issue in creating Drop Down Menu

    Hi,

    I am facing an issue in creating a drop down menu. Completed few steps but not got the desired result. Snaps and code is attached for reference

    MENU BEFORE FOCUS

    Name:  menu.jpg
Views: 280
Size:  7.7 KB

    MENU ON HOVER
    Name:  Menu1.jpg
Views: 267
Size:  12.0 KB


    WANT THE BELOW RESULT

    Name:  desire.jpg
Views: 519
Size:  30.6 KB

    my code is as under
    HTML Code:
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <style>
            	
    			#divbg {
    				/*background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
    							 rgba(168,211,255,1) 100%);*/  			/*REVERSE BACKGROUND */
    				
    				background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%, 
    							rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
    				width:50%;
    				margin:0 auto;
    				text-align:center;
    				border-radius:10px;
    				}
    			
    			body {
    				margin:0px; 
    				padding:0px;
    				}
    			
    			#nav ul {
    				margin:0px; 
    				padding:0px;
    				}
    			
    			#nav  li {
    				background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%, 
    							rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
    				width:150px;
    				height:60px;
    				line-height:60px;
    				list-style:none;
    				color:white;
    				border-radius:5px;
    				text-align:center;
    				border-right:1px solid white;
    				display:inline-block;
    				position:relative;
    				float:left;
    				}
    			
    			#nav li:hover {
    				background:none;
    				background-color:#900;
    				text-decoration:none;
    				color:white;
    				display:block;
    				text-align:center;
    				}
    
    			#nav li a:hover {
    				background-color:yellow;
    				
    				}
    				
    			#nav ul li ul {
    				position:absolute;
    				visibility:hidden;
    				}
    
    			#nav ul li ul {
    				position:absolute;
    				visibility:hidden;
    				}
    
    			
    			#nav ul li:hover ul {
    				background:none;
    				visibility:visible;
    				background-color:#FFF;
    				color:white;
    				box-shadow:10px 10px 10px rgba(0,0,0,1);
    				
    				}	
            </style>
            
        </head>
    
        <body>
        	<div id="divbg">
                <div id="nav">
                    <ul>
                        <li><a>User Management</a>
                            <ul>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                            </ul>
                        </li>
                        
                        <li>Account Management</li>
                        <li>Inventory Management</li>
                        <li>Voucher Management</li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Issue in creating Drop Down Menu

    I usually go for a Javascript-Jquery menu to avoid doing all that CSS (that i am not very good at). Also note -moz-linear , this will not work on Iexplorer so be careful.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    May 2004
    Location
    Quetta-Pakistan
    Posts
    852

    Re: Issue in creating Drop Down Menu

    there is a solution of -moz-linear for Iexplorer, but what is the solution of my issue ?

  4. #4
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Issue in creating Drop Down Menu

    As i've said i use Javascript menus to avoid CSS hell, so i don't have a solution for your CSS menu.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    May 2004
    Location
    Quetta-Pakistan
    Posts
    852

    Re: Issue in creating Drop Down Menu

    do you have some sample code for a perfect javascript menu

  6. #6
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Issue in creating Drop Down Menu

    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  7. #7

    Thread Starter
    Fanatic Member
    Join Date
    May 2004
    Location
    Quetta-Pakistan
    Posts
    852

    Re: Issue in creating Drop Down Menu

    Thanks,
    By the way i have done it with css. Code is s under
    Code:
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <style>
            	
    			#divbg {
    				/*background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
    							 rgba(168,211,255,1) 100%);*/  			/*REVERSE BACKGROUND */
    				
    /*				background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%, 
    							rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
    */				width:600px;
    				height:70px;
    				margin:0 auto;
    				text-align:center;
    				border-radius:5px;
    				border:1px solid navy;
    				}
    			
    			body {
    				margin:0px; 
    				padding:0px;
    				}
    			
    			#nav ul {					/* TOP BAR */
    					margin:0px; 
    					padding:0px;
    				}
    			
    			#nav  li {					/* TOP BAR SETTING */
    				background-image:url(button_bg.png);
    				/*background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%, 
    							rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);*/     /*GRADIENT*/
    				width:150px;
    				height:70px;
    				line-height:70px;
    				list-style:none;
    				color:white;
    				border-radius:0px;
    				text-align:center;
    				display:inline-block;
    				position:relative;
    				float:left;
    				}
    
    			#nav li:hover {				/* TOP MENU HOVER SETTING */
    				background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
    							 rgba(168,211,255,1) 100%);
    				text-decoration:none;
    				color:white;
    				display:block;
    				text-align:center;
    				cursor:pointer;
    				}
    						
    			#nav li ul li{				/* SETTIGN FOR DROPDOWN MENU */
    				width:150px;
    				height:30px;
    				line-height:2;
    				background:none;
    				background-color:#F9F9F9;
    				color:navy;
    				border:0.1px solid #F0F0F0;
    				border-radius:0px;
    				text-align:left;
    				padding-left:10px;
    				}
    						
    			#nav li ul li:hover {		/* DROPDOWN MENU TEXT ALIGNMENT */
    				text-align:left;
    				}
    
    			#nav ul li ul {
    				position:absolute;
    				visibility:hidden;
    				transition:visibility 2s linear,opacity 0.3s linear;
    				opacity:0;
    				}
    			
    			#nav ul li:hover ul {
    				background:none;
    				visibility:visible;
    				/*box-shadow:10px 10px 10px rgba(0,0,0,1);*/
    				cursor:pointer;
    				opacity:1;
    				}	
            </style>
            
        </head>
    
        <body>
        	<div id="divbg">
                <div id="nav">
                    <ul>
                        <li><a>User Management</a>
                            <ul>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                            </ul>
                        </li>
                        
                        <li>Account Management
                            <ul>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                                <li><a>New User</a></li>
                                <li><a>User Management</a></li>
                            </ul>
    
                        </li>
                        <li>Inventory Management</li>
                        <li>Voucher Management</li>
                    </ul>
                </div>
            
            </div>
        </body>
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width