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")


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.