nav_sytle.css 943 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body{
  6. background-color: green;
  7. }
  8. .con{
  9. position: absolute;
  10. z-index: 0;
  11. top: 50%;
  12. margin-top: -51px;
  13. left: 50%;
  14. margin-left: -202px;
  15. }
  16. .bgDiv{
  17. width: 100%;
  18. height: 100%;
  19. background-color: #000;
  20. opacity: .5;
  21. position:fixed;
  22. display: none;
  23. z-index: 99;
  24. bottom: 0;
  25. }
  26. .leftNav{
  27. width: 50%;
  28. max-width: 340px;
  29. height: 100%;
  30. background-color: #fff;
  31. position: fixed;
  32. z-index: 999;
  33. top: 0;
  34. left: -50%;
  35. }
  36. .rightNav{
  37. width: 50%;
  38. max-width: 340px;
  39. height: 100%;
  40. background-color:#fff;
  41. position: fixed;
  42. z-index: 999;
  43. top: 0;
  44. right: -50%;
  45. }
  46. .upNav{
  47. width: 100%;
  48. height: 40%;
  49. background-color: #fff;
  50. position: fixed;
  51. z-index: 999;
  52. top: -40%;
  53. }
  54. .downNav{
  55. width: 100%;
  56. height: 40%;
  57. background-color: #fff;
  58. position: fixed;
  59. z-index: 999;
  60. bottom: -40%;
  61. }