Your Ad Here

advanced code snippet search

Posted By

wildpeaks on 11/30/10


Tagged

virtualearth bingmaps


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wildpeaks


Bing Maps AJAX control 7.0: Better-looking NavBar (Dashboard) and Map.setView padding

 / Published in: CSS
 

URL: http://www.wildpeaks.com

Important: this snipplet has moved to Github.

Moves the NavBar "outside" of the map so that it doesn't interfer with Map.setView and adds a subtle shadow on the NavBar and its dropdown menus.

Bing Maps AJAX 7.0 Control API Reference

Expand | Embed | Plain Text 
  1. #YourMapContainer {
  2. 	overflow: hidden;
  3. }
  4.  
  5. #YourMapContainer .MicrosoftMap {
  6. 	overflow: visible !important;
  7. 	margin-top: 30px !important;
  8. 	background: none !important;
  9. }
  10.  
  11. #YourMapContainer .MicrosoftMap .NavBar {
  12. 	width: 100%;
  13. 	top: -30px;
  14. 	-moz-box-shadow: 0px 0px 4px #000;
  15. 	-webkit-box-shadow: 0px 0px 4px #000;
  16. 	box-shadow: 0px 0px 4px #000;
  17. 	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')";
  18. 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888');
  19. }
  20.  
  21. #YourMapContainer .NavBar_zoomDrop, #YourMapContainer .MicrosoftMap_NavBar_typeMenu {
  22. 	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  23. 	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  24. 	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  25. 	border: 1px solid #aaaaaa;
  26. 	border-top: none;
  27. }

Report this snippet  

You need to login to post a comment.