html5 Up Highlights - добавление плавающей навигационной панели из другого стиля

Я хочу использовать шаблон Highlights из HTML5 вверх, но я хочу добавить панель навигации, аналогичную той, что находится в другом шаблоне, например this menu one, который плавает , и рулоны при нажатии.html5 Up Highlights - добавление плавающей навигационной панели из другого стиля

Я изучил HTML, CSS и JSCRIPT и попытался адаптировать первый шаблон к панели навигации, а также исследовать различные варианты в SO без успеха.

Два шаблона используют разные подходы в своем html, структура шаблонов подчеркивания использует <div class="container"> в заголовке, в то время как другая использует <body class="landing"> ,<div id="page-wrapper">. Возможно ли это?

Это то, что я пробовал:

HTML

... 
<style> 
.floating-menu { 
    font-family: sans-serif; 
    background: transparent; 
    padding: 5px; width: 130px; 
    z-index: 10000; 
    position: fixed; 
} 
.floating-menu a, .floating-menu h3 { 
    font-size: 0.8em; 
    display: block; 
    margin: 0 0.5em; 
    color: white; 
} 
</style> 
</head> 

<body> 

<nav class="floating-menu"> 
    <div id="nav-toggle"> 
     <a href="#"><span></span><span></span><span></span></a> 
     <div class="menu-caption"> 
     </div> 
    </div> 
    <div id="nav" class="nav-collapse collapse"> 
     <ul> 
      <li><a href="# ">Home</a></li> 
      <li><a href="#one">Who I am</a></li> 
      <li><a href="#two">Stuff I do</a></li> 
     </ul> 
    </div> 
</nav>

CSS:

/* nav */ 

#nav > ul { 
    margin: 0; 
    display:block 
} 
#nav > ul > li { 
    position: relative; 
    display: inline-block; 
    margin-left: 0em; 
} 
#nav > ul > li a { 
    color: #c0c0c0; 
    text-decoration: none; 
    border: 0; 
    display: block; 
    padding:0em 0em; 
} 
#nav > ul > li:first-child { 
    margin-left: 0; 
} 
#nav > ul > li:hover a { 
    color: #fff; 
} 
#nav > ul > li.current { 
    font-weight: 400; 
} 
#nav > ul > li.present { 
    font-weight: 400; 
} 
#nav > ul > li.present:before { 
    -moz-transform: rotateZ(45deg); 
    -webkit-transform: rotateZ(45deg); 
    -ms-transform: rotateZ(45deg); 
    transform: rotateZ(45deg); 
    width: 0.75em; 
    height: 0.75em; 
    content:''; 
    display: block; 
    position: absolute; 
    bottom: -0.5em; 
    left: 50%; 
    margin-left: -0.375em; 
    background-color: #37c0fb; 
} 


#nav > ul > li.present a { 
    color: #fff; 
} 
#nav > ul > li.active a { 
    color: #fff; 
} 
#nav > ul > li.active.present:before { 
    opacity: 0; 
    } 


#nav { 
    cursor: default; 
    background-color: #333; 
    padding: 0; 
    text-align: left; 
} 

    #nav-toggle { 
    background-color: #transparent; 
    cursor: pointer; 
    display:block; 
    } 


#nav-toggle > a { 
    float:left; 
    color:#fff; 
    padding:0px; 
    width: 0px; 
} 
#nav-toggle > a > span { 
    width:26px; 
    height:2px; 
    background-color:#fff; 
    display:block; 
} 
#nav-toggle > a > span + span { 
    margin-top:4px; 
} 

    #nav > ul { 
     display:none; 
    } 
    #nav > ul > li { 
     display: block; 
    } 

.menu-caption { 
    display:inline-block; 
    color:#fff; 
    padding:10px; 
} 


@media screen and (max-width:767px) { 
    #nav-toggle { 
     display:block; 
    } 
    #nav > ul { 
     display:none; 
    } 
    #nav > ul > li { 
     display: block; 
    } 
}

$(function() { 
var windowWidth = $(window).width(); 


$("#nav-toggle").click(function() { 
    $("#nav ul").slideToggle(); 
    $("#nav ul").toggleClass("open"); 
}); 

     var navMain = $("#nav"); 
    navMain.on("click", "a", null, function() { 
     navMain.collapse('hide'); 
    }); 

$(window).resize(function() { 
    windowWidth = $(window).width(); 
    if (windowWidth < 767) { 
     if ($("#nav ul").is(":hidden")) { 
      $("#nav ul").css("display","block"); 
     } 
    } 
    else { 
     $("#nav ul").css("display","none"); 
    } 
});

Но это имеет странное поведение, что меню не загнуть после был выбран пункт ...

источник

2016-04-21 bla

Предлагаю работать другим способом. Начните с шаблона Spectral, который уже имеет нужное меню и добавляет содержимое шаблона Highlights. –

спасибо за предложение. Однако, в шаблоне Spectral, могу ли я сделать эффект зависания блока над изображением в фоновом режиме? – bla

Если вы внимательно посмотрите, он уже использует тот плавающий блок, который вас интересует. Прокрутите весь путь вниз, и вы заметите, что фон все еще там. Вам просто нужно указать ширину на 'section', и они центрируют их с помощью margin: 0 auto; '. Есть еще кое-что, но это должно заставить вас начать. –

Для иллюстрации, в спектральном index.html файл добавить это в разделе <head> ниже другой CSS ссылки. Это должно дать вам хорошую отправную точку для того, что вы хотите.

<style> 
    #one, #two, #three, #cta, #footer, .wrapper > .inner { 
     margin: 0 auto; 
     width: 50%; 
    } 
</style>

Я бы предложил внести эти изменения в фактический файл CSS после этого.

Для быстрого реагирования вы можете настроить медиа-запросы, используя синтаксис ниже в вашем файле CSS, чтобы отрегулировать ширину section, чтобы заполнить ширину страницы при просмотре в мобильном режиме.

@media(max-width: 767px){ 
     #one, #two, #three, #cta, #footer, .wrapper > .inner { 
      margin: 0 auto; 
      width: 100%; 
     } 
}

источник

2016-04-21 21:48:23

спасибо, что я сыграю с этим сам в ближайшее время – bla

спасибо за предложения, у меня есть проблемы, хотя с изменением фоновых изображений, но для имитации шаблона основных моментов ... оценен любой совет, как подойти к этому, .. – bla

Настройте новый вопрос с тем, что у вас есть. Я постараюсь вам помочь, и вы можете получить некоторых других пользователей с более точными ответами. –

html5 Up Highlights - добавление плавающей навигационной панели из другого стиля

ответ

Смежные вопросы