Question

好的，所以这里的事情是，我可以让password_photo_galleries去他们需要的地方的唯一方法是在导航栏上添加一个额外的按钮来打开该信息..我想要做的是有导航栏按钮MyGallery提出了photo_galleries和password_photo_galleries，但我似乎无法弄清楚如何将它与那个按钮结合起来......任何帮助都会非常感激，我也只是想到了什么，我能做的唯一方法认为它可能工作是使按钮我的画廊做下拉两个按钮我的画廊/密码库但我的导航栏是-90deg所以我不知道这将如何工作，但只是一个想法..两种方式将工作正常..再次感谢

#profile_photo_galleries .heading {
  text-transform:uppercase;
  font-size:38px;
  color:#FF00FF;
  font-weight:normal;
  border-bottom:1px dotted #666666;
  padding-bottom:10px;
  margin-bottom:20px;
}

#profile_password_photo_galleries .heading {
  text-transform:uppercase;
  font-size:38px;
  color:#FF00FF;
  font-weight:normal;
  border-bottom:1px dotted #666666;
  padding-bottom:10px;
  margin-bottom:20px;
}

#profile_photo_galleries {
  width:400px;
  height:600px;
  color:#000000;
  font-family:"Baskerville Old Face",serif;
  font-style:italic;
  font-size:20px;
  background-color:rgba(0,0,255);
  position:absolute;
  top:200px;
  right:-1200px;
  padding:40px;
  transition:left 0 ease-in-out;
}

#profile_password_photo_galleries {
  width:400px;
  height:600px;
  color:#000000;
  font-family:"Baskerville Old Face",serif;
  font-style:italic;
  font-size:20px;
  background-color:rgba(0,0,255);
  position:absolute;
  top:200px;
  right:-1200px;
  padding:40px;
  transition:left 0 ease-in-out;
}

#profile_photo_galleries:target {
  right:80%;
  margin-right:-520px;
}

#profile_password_photo_galleries:target {
  right:80%;
  margin-right:-520px;
}

.photo_gallery {
  position:fixed;
  bottom:0;
  left:0;
  width:96.9%;
  margin-bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:99;
}

.password_photo_galleries {
  position:fixed;
  bottom:0;
  left:0;
  width:96.9%;
  margin-bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:99;
}

.photo_gallery .heading,.password_photo_galleries .heading {
  text-transform:uppercase;
  font-size:38px;
  font-weight:normal;
  border-bottom:1px dotted #666666;
  padding-bottom:10px;
  margin-bottom:20px;
}

.password_photo_galleries .heading {
  text-transform:uppercase;
  font-size:38px;
  font-weight:normal;
  border-bottom:1px dotted #666666;
  padding-bottom:10px;
  margin-bottom:20px;
}

.photo_gallery .images a,.password_photo_galleries .images a {
  display:block;
  float:left;
  border:5px solid #000;
  margin-right:10px;
  margin-bottom:10px;
}

.password_photo_galleries .images a {
  display:block;
  float:left;
  border:5px solid #000;
  margin-right:10px;
  margin-bottom:10px;
}

.photo_gallery_preview,.password_photo_galleries_preview {
  border:1px solid #333;
  overflow:auto;
  padding:20px 15px;
  width:100px;
  background-color:#000;
}

.password_photo_galleries_preview {
  border:1px solid #333;
  overflow:auto;
  padding:20px 15px;
  width:100px;
  background-color:#000;
}

.photo_gallery_name a,.password_photo_galleries_name a {
  color:#FFF;
  margin-bottom:20px;
  display:block;
  text-transform:uppercase;
}

.password_photo_galleries_name a {
  color:#FFF;
  margin-bottom:20px;
  display:block;
  text-transform:uppercase;
}

.photo_gallery_link {
  display:block;
  margin-bottom:15px;
}

.password_photo_galleries_link {
  display:block;
  margin-bottom:15px;
}

.photo_gallery_count {
  font-style:italic;
  color:#666;
}

.password_photo_galleries {
  font-style:italic;
  color:#666;
}

NAVBAR的HTML代码

<div id="right_menu">
    <a href="#profile_photo_galleries"><span>my gallery</span></a>
    <a href="#profile_password_photo_galleries"><span>Password</span</a>***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>

这是导航栏，没有链接

#right_menu {
  position:fixed;
  font-size:15px;
  top:0;
  right:0;
  background-color:#FF00FF;
  width:50px;
  height:100%;
}

#right_menu a {
  text-align:center;
  display:block;
  padding:10px;
  height:15%;
  width:50px;
  margin-bottom:0;
  text-transform:uppercase;
  position:relative;
}

#right_menu a:nth-child(1) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(1) span {
  display:block;
  position:absolute;
  top:40px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(1):hover span {
  left:-45px;
}

Answer 1

每个DOM元素都有一个id。你可以用这样的东西来近似它

<div id='id1'><span id='id2'></span></div>

然后使用导航来获得您真正想要的内容。

将两个执行不同操作的ID组合到一个div按钮

1 个答案: