2015-06-11 44 views
0

確定,所以這裏的問題是,我可以得到password_photo_galleries只有這樣,才能去的地方,他們需要被添加上導航欄額外的按鈕打開信息..我試圖做的是有導航欄按鈕MyGallery帶來photo_galleries和password_photo_galleries,但我似乎無法弄清楚如何得到它與該按鈕結合..任何幫助將不勝感激,我也只是想到了一些事情,唯一能夠想到它可能會奏效的方法是讓My Gallery按鈕做兩個按鈕的下拉菜單我的圖庫/密碼庫,但是我的導航欄是-90deg,所以我不知道如何工作,但只是一個想法..無論哪種方式,將正常工作..再次感謝結合兩個ID的那個做不同的事情,一個DIV按鈕

#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; 
} 

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; 
} 
+0

try'id ='home_page'' etc - '#'代表css中的一個id,在'href'中不需要 - 在'href'中它鏈接到一個不同的頁面部分 –

+0

正好它將其鏈接到頁面的一部分,並將其展示出來 – jerry

+0

看來你的CSS使用的是href內容的樣式?這是不行的,雖然它不會影響你的鏈接 –

回答

1

每個DOM元素都有一個ID。你可以使用類似這樣的近似值

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

然後使用導航得到你真正想要的。

相關問題