dedecmsナビゲーション

5203 ワード
decms dedecmsナビゲーション 

  
  
  
  
    
   
   
   
   
  1. <div id="navMenu"> 
    2. 
   
   
   
   
  2.         <ul> 
    3. 
   
   
   
   
  3.         <li><a href='{dede:global.cfg_cmsurl/}/'>  </a></li> 
    4. 
   
   
   
   
  4.         {dede:channel type='top' row='10'} 
    5. 
   
   
   
   
  5.         <li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li> 
    6. 
   
   
   
   
  6.         {/dede:channel} 
    7. 
   
   
   
   
  7.         </ul> 
    8. 
   
   
   
   
  8.     </div> 
    9.

 CSS:
  

  
  
  
  
    
   
   
   
   
  1. /* ---------      ----------------*/ 
    2. 
   
   
   
   
  2.  
    3. 
   
   
   
   
  3. #navMenu { 
    4. 
   
   
   
   
  4.     width:960px; 
    5. 
   
   
   
   
  5.     overflow:hidden; 
    6. 
   
   
   
   
  6.     height: 48px; 
    7. 
   
   
   
   
  7.     background-color: #0053AD; 
    8. 
   
   
   
   
  8.     margin-right: auto; 
    9. 
   
   
   
   
  9.     margin-left: auto; 
    10. 
   
   
   
   
  10.     margin-bottom: 5px; 
    11. 
   
   
   
   
  11.     margin-top: 5px; 
    12. 
   
   
   
   
  12. } 
    13. 
   
   
   
   
  13. #navMenu ul { 
    14. 
   
   
   
   
  14.     float:left; 
    15. 
   
   
   
   
  15.     height: 48px; 
    16. 
   
   
   
   
  16.     margin-left: 10px; 
    17. 
   
   
   
   
  17. } 
    18. 
   
   
   
   
  18. #navMenu ul li { 
    19. 
   
   
   
   
  19.     float:left; 
    20. 
   
   
   
   
  20.     height: 48px; 
    21. 
   
   
   
   
  21.     display: block; 
    22. 
   
   
   
   
  22.     line-height: 48px; 
    23. 
   
   
   
   
  23.     padding-right: 10px; 
    24. 
   
   
   
   
  24.     padding-left: 10px; 
    25. 
   
   
   
   
  25. } 
    26. 
   
   
   
   
  26. #navMenu ul li a { 
    27. 
   
   
   
   
  27.     color: #FFFFFF; 
    28. 
   
   
   
   
  28.     height: 48px; 
    29. 
   
   
   
   
  29.     text-decoration:none; 
    30. 
   
   
   
   
  30.     display: inline-block; 
    31. 
   
   
   
   
  31.     position: relative; 
    32. 
   
   
   
   
  32.     font-size: 16px; 
    33. 
   
   
   
   
  33.     line-height: 48px; 
    34. 
   
   
   
   
  34.     font-weight: bold; 
    35. 
   
   
   
   
  35.     font-family: "    "; 
    36. 
   
   
   
   
  36. } 
    37. 
   
   
   
   
  37. /*...      li  ......*/ 
    38. 
   
   
   
   
  38. #navMenu ul li:hover { 
    39. 
   
   
   
   
  39.     text-decoration:none; 
    40. 
   
   
   
   
  40.     display: inline-block; 
    41. 
   
   
   
   
  41.     position: relative; 
    42. 
   
   
   
   
  42.     background-color: #FF6600; 
    43. 
   
   
   
   
  43. } 
    44.

End !
Androidブラウザがクリックした時の黄枠CSS
bootstrapの使用