Post
Ask Question
ahmed salah

ahmed salah

  • NA
  • 530
  • 148.9k

How add Vertical Menu in left center of default layout view

Nov 22 2016 12:17 PM

Problem

I have vertical menu bar jquery css and i need to add to layout view(master page) in visual studio 2015

so that How to do that .

vertical menu bar jquery css code

This menu working without any problem but

my problem how to put menu in left side in layout view

css

StyleSheet1.css
 
  1. ul,  
  2. li,  
  3. a {  
  4.   padding: 0px;  
  5.   margin: 0px;  
  6. }  
  7.  
  8. #nav1 a {  
  9.   color: #FFFFFF;  
  10. }  
  11.  
  12. #nav1 li ul li a:hover {  
  13.   background-color: #394963;  
  14. }  
  15.   
  16. div ul li ul {  
  17.   background-color: #4a5b78;  
  18.   list-style: none  
  19. }  
  20.  
  21. #nav1 > li > a {  
  22.   background-color: #343434;  
  23.   padding: 16px 18px;  
  24.   text-decoration: none;  
  25.   display: block;  
  26.   border-bottom: 2px solid #212121;  
  27.   background: linear-gradient(top, #343434, #111111);  
  28. }  
  29.  
  30. #nav1 li ul li a {  
  31.   padding: 10px 0;  
  32.   padding-left: 30px;  
  33.   text-decoration: none;  
  34.   display: block;  
  35. }  
  36.   
  37. div {  
  38.   background-color: #000000;  
  39.   background-color: #343434;  
  40.   width: 280px;  
  41. }  
  42. /* Hide Dropdowns by Default */  
  43. #nav1 li ul {  
  44.   display: none;  
  45. }  
 
  1. jquery  
  2.   
  3. $(document).ready(function() {  
  4.   $("#nav1 li").hover(  
  5.     function() {  
  6.       $(this).find('ul').slideDown();  
  7.     },  
  8.     function() {  
  9.       $(this).find('ul').slideUp();  
  10.     });  
  11. }); 

  13.  
  1. HTML  
  2.   
  3. <div id="container">  
  4.   <ul id="nav1">  
  5.     <li><a href="#">Menu Heading 1</a>  
  6.     <ul>  
  7.       <li><a href="#">Stage1</a></li>  
  8.       <li><a href="#">Stage2</a></li>  
  9.       <li><a href="#">Stage3</a></li>  
  10.       <li><a href="#">Stage4</a></li>  
  11.     </ul>  
  12.     </li>  
  13.     <li><a href="#">Menu Heading 2</a>  
  14.       <ul>  
  15.       <li><a href="#">Stage1</a></li>  
  16.       <li><a href="#">Stage2</a></li>  
  17.       <li><a href="#">Stage3</a></li>  
  18.       <li><a href="#">Stage4</a></li>  
  19.     </ul>  
  20.     </li>  
  21. </ul>  
  22. <div>  
 

my layout view

Layout = "~/Views/Shared/_Layout.cshtml";

default _Layout found in visual studio 2015 without any customization

I do every thing but design come corrupted

actually i need menu in left center side vertically

and not change main design of default layout

because after i apply menu it change main design

see link below

http://www.mediafire.com/view/5z34m3hp9lfjst2/corrupt_design.jpg

 

Answers (7)