Hello, Guest . ProRips.Do.Am - is a website where you can find uCoz templates , scripts for uCoz and uCoz graphics . Some templates and scripts are taken from other sites and are checked by uu and some templates are rips of other sites. We are also looking for staff. So if you're interested, do not hesitate to make a request on our forum.
2024-04-27, 2:44 AM
Rendszer (Users)
  • Reputation: 0
  • Posts: 0
cinemabiled (Users)
  • Reputation: 0
  • Posts: 0
steffanelu86 (Users)
  • Reputation: 0
  • Posts: 0
2024-04-27 at 5:58 PMGreat menubar

Present to you, a simple menubar color painting water ... Fixed menu, etc hover on the link will change color ...

Installation:

This is the style sheet:


Code

.menu a {
  text-decoration: none;
  color: #fff;
text-shadow: 0 1px #2b6a83;
  font-weight: bold;
  float: left;
  display: block;
}
.menu a:hover { color: #276a85; text-shadow: 0 1px #e1eff5; }
.drop-down a {
  float: none;
  min-width: 90px;
}

.menu a {
  display: block;
  padding: 10px 15px;
}

.drop-down-menu {
  float: left;
  display: block;
}

.menu-title {
  cursor: default;
  padding: 10px 15px;
}

.activate {
  display: none;

  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 40px;
  margin: 0 0 0 -15px;
  opacity: 0;
}

@media only screen and (min-width: 800px) {

  .drop-down-menu:hover .drop-down {
  display: block;
  }  

  .drop-down {
  position: absolute;
  }

}

@media only screen and (max-width: 799px) {

  .menu a, .drop-down-menu {
  float: none;
  }

  .activate {
  display: block;
  }

}

/* Skin */

.menu a, .drop-down-menu {
  background: #44a7cf;
  background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
  background: -moz-linear-gradient(top, #44a7cf, #317794);
}

.menu a:hover, .drop-down-menu:hover {
  background: #5a6470;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#a2cfe0));
  background: -moz-linear-gradient(top, #feffff 0%, #a2cfe0 100%);
}

.drop-down a {
  background: #222;
}

.drop-down a:hover {
  background: #111;
}

@media only screen and (min-width: 800px) {

  .first {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  }

  .last {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  }

  .drop-down .last {
  border-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  }

}

@media only screen and (max-width: 799px) {

  .menu {
background: #44a7cf;
  background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
  background: -moz-linear-gradient(top, #44a7cf, #317794);
}
  :checked ~ .menu-title {
  background: #495261;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#495261), color-stop(100%,#38404b));
  background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);
  }

  .menu a, .drop-down-menu {
  background: none;
  }

  .drop-down a {
  background: #222;
  }

}

/* IE */

.ie8 .drop-down-menu:hover .drop-down { display: block; }  
.ie8 .drop-down { position: absolute; }

.drop-down {
  max-height: 0;
  overflow: hidden;
}

.ie8 .drop-down-menu:hover .drop-down {
  max-height: 200px;
}

@media only screen and (min-width: 800px) {

  .drop-down-menu:hover .drop-down {
  max-height: 200px;
  }  

}

@media only screen and (max-width: 799px) {

  .activate:checked ~ .drop-down {
  max-height: 200px;
  }  

}

.drop-down, .menu a, .drop-down-menu {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}


And it's there where we want to see the menu:

Code
<nav class="menu">  
<a class="first" href="/">Home</a>  
  <a href="/load">Forum</a>  
  <a href="/load">Photos</a>  
  <a href="/load">Menu 23</a>  
  <a href="/load">Games</a>  
  <a href="/load">Others</a>  
  <a class="last" href="/load">Adauga Material</a>  
  </nav>
Author: Guest Category: Menu Views: 848
Attention! To view demo "Great menubar" please Login or Register!
Downloads: Comments: 0
Tag-Board
Statistics
Total online: 1
Guests: 1
Users: 0
Total users: 109
Users Online
Our Visitors Today ()
88x31
Free BackLink