Advanced Search

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

/ Published in: CSS
Save to your folder(s)
**Important: this snipplet has moved to Github.**

- [Nicer dashboard and Map.setView padding in Bing Maps AJAX 7.0](https://gist.github.com/1973161)

----------------

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](http://msdn.microsoft.com/en-us/library/gg427611.aspx "Bing Maps AJAX 7.0 Control API Reference")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

URL: http://www.wildpeaks.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.