ロゴjquery

Question

私は自分のjQueryサブメニューを完成させようとしていましたが、いくつかのCSS問題でつまずきました。ここで

は私の質問は以下のとおりです。

1. 私は再びナビゲーションを再度開いたとき、私は問題を解決するにはどうすればよいそれが初めて開かれたよりも、底に多くのパディングを追加しますか？

.sidebar-nav { 
 
    position: fixed; 
 
    float: left; 
 
    width: 250px; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #e74c3c; 
 
    color: #aaabae; 
 
    font-family: "Lato"; 
 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
 
    z-index: 1; 
 
} 
 

 
#nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 20px; 
 
} 
 

 
#nav li { 
 
    position: relative; 
 
    margin: 0; 
 
    font-size: 15px; 
 
    border-bottom: 1px solid #fff; 
 
    padding: 0; 
 
} 
 

 
#nav li ul { 
 
    opacity: 0; 
 
    height: 0px; 
 
} 
 

 
#nav li a { 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    position: relative; 
 
    display: block; 
 
    padding: 16px 25px; 
 
    color: #fff; 
 
    white-space: nowrap; 
 
    z-index: 2; 
 
    text-decoration: none 
 
} 
 

 
#nav li a:hover { 
 
    color: #c0392b; 
 
    background-color: #ecf0f1; 
 
} 
 

 

 

 
#nav ul li { 
 
\t background-color: #2b303a; 
 
} 
 

 
#nav li:first-child { 
 
\t border-top: 1px solid #fff; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 

 
#nav .fa { margin: 0px 17px 0px 0px; } 
 

 
.logo { 
 
    width: 100%; 
 
    padding: 21px; 
 
    margin-bottom: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
#logo{ 
 
color: #fff; 
 
    font-size: 30px; 
 
    font-style: normal; 
 
} 
 

 
.sidebar-icon { 
 
    position: relative; 
 
    float: right; 
 
    text-align: center; 
 
    line-height: 1; 
 
    font-size: 25px; 
 
    padding: 6px 8px; 
 
    color: #fff; 
 
} 
 

 
.disp { 
 
    opacity: 1!important; 
 
    height:auto!important; 
 
    transition: height 100ms ease-in-out; 
 
    transition-delay: 300ms; 
 
}

Answer 1

1. .logoのheightプロパティが.contentを有すると.sidebar-collapsedクラスなしの両方である場合、同じ値に設定されていることを確認。
2. paddingプロパティが.logoです。ハンバーガーのために残っている部屋はほとんどありません。

paddingは、他のメニューアイコンの中央に表示されているようです。別の戦術を考えてみましょう - それを行うには、より良い方法がたくさんあります。

• https://css-tricks.com/centering-css-complete-guide/#center-horizontally
• http://howtocenterincss.com/

Answer 2

これを試してみてください。いくつかの要素がいくつかinncorrectマージンを持っていると私はいくつかの変更をしたとして

html, 
body { 
font-family: 'Lato', sans-serif; 
    height: 100%; 
    background: #ecf0f1; 
} 


a { 
    color: #008DE7; 
    font-style: italic; 
    font-weight: 700; 
} 


.content { 
    min-width: 1260px; 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

.content.sidebar-collapsed { 
    padding-right: 65px; 
    transition: all 100ms linear; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back { 
    padding-right: 280px; 
    transition: all 100ms linear; 
} 

.content.sidebar-collapsed .sidebar-nav { 
    width: 65px; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .sidebar-nav { 
    width: 280px; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed .logo { 
    padding: 18px; 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
    padding-bottom:0; 
    margin:0; 
} 

.content.sidebar-collapsed-back .logo { 
    width: 100%; 
    padding: 21px; 
    /* height: 136px; */ 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed #logo { 
    opacity: 0; 
    transition: all 200ms ease-in-out; 
} 

.content.sidebar-collapsed-back #logo { 
    opacity: 1; 
    transition: all 200ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed #nav span { 
    opacity: 0; 
    transition: all 50ms linear; 
} 

.content.sidebar-collapsed-back #nav span { 
    opacity: 1; 
    transition: all 200ms linear; 
} 

.sidebar-nav { 
    position: fixed; 
    float: left; 
    width: 250px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #e74c3c; 
    color: #aaabae; 
    font-family: "Lato"; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
    z-index: 1; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li ul { 
    opacity: 0; 
    height: 0px; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #2b303a; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    padding: 6px 8px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition: height 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

demo:

Answer 3

私は余白を変更トランジションも同様に、 lsoナビゲーションの幅を250pxから開始して変更し、再び折りたたんだ後に280pxに変更しました。

ちょうどそれが役に立てば幸い:)

html, 
body { 
font-family: 'Lato', sans-serif; 
    height: 100%; 
    background: #ecf0f1; 
} 


a { 
    color: #008DE7; 
    font-style: italic; 
    font-weight: 700; 
} 


.content { 
    min-width: 1260px; 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

.content.sidebar-collapsed { 
    padding-right: 65px; 
    transition: all 100ms linear; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back { 
    padding-right: 280px; 
} 

.content.sidebar-collapsed .sidebar-nav { 
    width: 65px; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .sidebar-nav { 
    width: 250px; 
} 

.content.sidebar-collapsed .logo { 
    box-sizing: border-box; 
    transition: all 200ms; 
    overflow:auto; 
} 

.content.sidebar-collapsed-back .logo { 
    width: 100%; 
    padding: 21px; 
    margin:0; 
    box-sizing: border-box; 
} 

.content.sidebar-collapsed #logo { 
    opacity: 0; 
    display:none; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #logo { 
    opacity: 1; 
    display:inline-block; 
    transition-delay:500ms; 
} 

.content.sidebar-collapsed #nav span { 
    opacity: 0; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #nav .fa-plus { 
    opacity: 0; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #nav .fa-plus { 
    opacity: 1; 
    transition-delay:500ms; 
} 

.content.sidebar-collapsed-back #nav span { 
    opacity: 1; 
} 

.sidebar-nav { 
    position: fixed; 
    float: left; 
    width: 250px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #e74c3c; 
    color: #aaabae; 
    font-family: "Lato"; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
    z-index: 1; 
    transition:all 200ms; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li ul { 
    opacity: 0; 
    height: 0px; 
    transition:all 200ms; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none; 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #2b303a; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    height:34px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition:all 200ms; 
}