首页 \ 问答 \ 斜杆上的Navbar(Navbar on Slanted Div)

斜杆上的Navbar(Navbar on Slanted Div)

 我创建了一个与我的导航栏一起使用的预定div，但它会弄乱网站的其余格式。 导航栏位于右上方，倾斜的div位于其下方，但它会弄乱网页上的其他所有内容。 我一直在尝试一切无济于事。  
 http://imgur.com/a/bmv6l  
 导航HTML：  
<template name="navbar">
  <div class="navbar">
    <ul>
      <li><a href="https://www.meteor.com/try">Contact</a></li>
      <li><a href="http://guide.meteor.com">Services</a></li>
      <li><a href="https://docs.meteor.com">Experience</a></li>
      <li><a href="https://forums.meteor.com" class="active">Home</a></li>
    </ul>
  </div>
</template>
 
 Navbar CSS：  
.navbar {
  position: relative;
  display: inline-block;
  padding: 0em 0em 1em 10em;
  overflow: hidden;
  color: #fff;
  float: right;
}

.navbar:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
  z-index: -1;
}

ul {
  list-style-type: none;
  margin-left: 100px;
  margin: 0;
  padding: 0;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 5px;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: bolder;
  -webkit-font-smoothing: antialiased;
  z-index: -1;
}

li {
  margin-left: 1em;
  margin-right: 2em;
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  border: 5px;
  border-style: solid;
  border-radius: 10px;
  border-color: white;
  transition: background 0.2s ease,
              padding 0.8s linear;
}

li a:hover {
  background-color: #111;
}

.active {
  border-radius: 8px;
  border-color: white;
  background-color: #555;
}
 
 “山猫服务”Div HTML：  
<body>
  <div id="nav">
    {{> navbar}}
  </div>
  <div id="center">
      <h1>Bobcats Services</h1>
      <h2>Everything you need!</h2>
  </div>
</body>
 
 “山猫服务”Div CSS：  
/* CSS declarations go here */
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  /*background-color: #0193ff;*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: rgb(135,224,253); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

  /* Image instead of standard color
  background-image: url("images/watch-plane.png");
  background-repeat: no-repeat;
  background-size: cover;
  */
}

#nav {

}

#center {
  width: 30%;
  padding-bottom: 2em;
  padding-top: 2em;
  margin: auto;
  margin-top: 2em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-style: solid;
  border-radius: 5px;
  border-color: #008fc8;
  font-family: 'Open Sans', sans-serif;
}

I have created a slated div to use with my navbar, but it messes up the rest of the formatting for the website. The navbar is in the top right and the slanted div is underneath it, but it messes up everything else on the webpage. I've been trying everything to no avail. 
http://imgur.com/a/bmv6l 
Navbar HTML: 
<template name="navbar">
  <div class="navbar">
    <ul>
      <li><a href="https://www.meteor.com/try">Contact</a></li>
      <li><a href="http://guide.meteor.com">Services</a></li>
      <li><a href="https://docs.meteor.com">Experience</a></li>
      <li><a href="https://forums.meteor.com" class="active">Home</a></li>
    </ul>
  </div>
</template>
 
Navbar CSS: 
.navbar {
  position: relative;
  display: inline-block;
  padding: 0em 0em 1em 10em;
  overflow: hidden;
  color: #fff;
  float: right;
}

.navbar:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
  z-index: -1;
}

ul {
  list-style-type: none;
  margin-left: 100px;
  margin: 0;
  padding: 0;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 5px;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: bolder;
  -webkit-font-smoothing: antialiased;
  z-index: -1;
}

li {
  margin-left: 1em;
  margin-right: 2em;
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  border: 5px;
  border-style: solid;
  border-radius: 10px;
  border-color: white;
  transition: background 0.2s ease,
              padding 0.8s linear;
}

li a:hover {
  background-color: #111;
}

.active {
  border-radius: 8px;
  border-color: white;
  background-color: #555;
}
 
"Bobcats Services" Div HTML: 
<body>
  <div id="nav">
    {{> navbar}}
  </div>
  <div id="center">
      <h1>Bobcats Services</h1>
      <h2>Everything you need!</h2>
  </div>
</body>
 
"Bobcats Services" Div CSS: 
/* CSS declarations go here */
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  /*background-color: #0193ff;*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: rgb(135,224,253); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

  /* Image instead of standard color
  background-image: url("images/watch-plane.png");
  background-repeat: no-repeat;
  background-size: cover;
  */
}

#nav {

}

#center {
  width: 30%;
  padding-bottom: 2em;
  padding-top: 2em;
  margin: auto;
  margin-top: 2em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-style: solid;
  border-radius: 5px;
  border-color: #008fc8;
  font-family: 'Open Sans', sans-serif;
}

原文：https://stackoverflow.com/questions/38650894

更新时间：2023-04-06 21:04

最满意答案

 IIUIC，这是一种方法。 比方说，  
 直径终点之间的gap是gap ，（红线的长度）  
 base是当前圈的左径点  
 base + d给你当前圈的中心  
 newbase是下一圈的左侧直径点  
 
 
  
  var myData1 = [5, 10, 15]
var mySvg1 = d3.select('body').append('svg')

var base = 90
var newbase = 90
var gap = 20
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d, i){
      base = newbase
    	newbase = newbase + 2*d + gap
    	return base + d
      })
    .attr('cy', '55')
    .attr('r', function(d){return d}) 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 
 
 https://jsfiddle.net/utfk44tL/ 

IIUIC, Here's one way. Let's say, 
Gap between diameter endpoints is gap, (length of red lines) 
base is current circle's left diameter point 
base + d gives you current circle's center 
newbase is next circle's left diameter point 
 
 
  
  var myData1 = [5, 10, 15]
var mySvg1 = d3.select('body').append('svg')

var base = 90
var newbase = 90
var gap = 20
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d, i){
      base = newbase
    	newbase = newbase + 2*d + gap
    	return base + d
      })
    .attr('cy', '55')
    .attr('r', function(d){return d}) 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 
 
https://jsfiddle.net/utfk44tL/

斜杆上的Navbar(Navbar on Slanted Div)

最满意答案

相关问答

如何在圆圈之间均匀分割d3链接(How to evenly split d3 links between circles)[2022-12-17]

D3.js语义缩放行为不当(D3.js semantic zoom misbehaving)[2023-12-18]

如何在D3.js中均匀排列圆圈并保持圆周之间的距离相等(how to evenly arrange circles in D3.js and keep equal distance between circumferences)[2024-03-04]

用D3.js动画圈子(Animating circles with D3.js)[2024-03-21]

d3.js鼠标悬停重叠的圆圈(d3.js mouseover overlapping circles)[2024-02-20]

在d3.js中添加新圆后，无法在圆之间创建链接(Can't create links between circles after appending new circles in d3.js)[2022-11-01]

如何在d3.js中为路径上的多个圆圈制作动画？(How to animate multiple circles on a path in d3.js?)[2022-02-25]

如何在d3.js中排列行中的矩形(How to arrange rectangles in rows in d3.js)[2023-05-23]

D3.js中的圆圈仅显示没有圆圈的文本(Circle in D3.js only displaying text without circle)[2022-01-22]

d3.js圈子没有出现(d3.js circles are not appearing)[2022-07-13]

相关文章

最新问答